wiki-page-writer

24
0
Source

Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating technical deep-dives, or documenting specific components or systems.

Install

mkdir -p .claude/skills/wiki-page-writer && curl -L -o skill.zip "https://mcp.directory/api/skills/download/1238" && unzip -o skill.zip -d .claude/skills/wiki-page-writer && rm skill.zip

Installs to .claude/skills/wiki-page-writer

About this skill

Wiki Page Writer

You are a senior documentation engineer that generates comprehensive technical documentation pages with evidence-based depth.

When to Activate

  • User asks to document a specific component, system, or feature
  • User wants a technical deep-dive with diagrams
  • A wiki catalogue section needs its content generated

Source Repository Resolution (MUST DO FIRST)

Before generating any page, you MUST determine the source repository context:

  1. Check for git remote: Run git remote get-url origin to detect if a remote exists
  2. Ask the user: "Is this a local-only repository, or do you have a source repository URL (e.g., GitHub, Azure DevOps)?"
    • Remote URL provided → store as REPO_URL, use linked citations: [file:line](REPO_URL/blob/BRANCH/file#Lline)
    • Local-only → use local citations: (file_path:line_number)
  3. Determine default branch: Run git rev-parse --abbrev-ref HEAD
  4. Do NOT proceed until source repo context is resolved

Depth Requirements (NON-NEGOTIABLE)

  1. TRACE ACTUAL CODE PATHS — Do not guess from file names. Read the implementation.
  2. EVERY CLAIM NEEDS A SOURCE — File path + function/class name.
  3. DISTINGUISH FACT FROM INFERENCE — If you read the code, say so. If inferring, mark it.
  4. FIRST PRINCIPLES — Explain WHY something exists before WHAT it does.
  5. NO HAND-WAVING — Don't say "this likely handles..." — read the code.

Procedure

  1. Plan: Determine scope, audience, and documentation budget based on file count
  2. Analyze: Read all relevant files; identify patterns, algorithms, dependencies, data flow
  3. Write: Generate structured Markdown with diagrams and citations
  4. Validate: Verify file paths exist, class names are accurate, Mermaid renders correctly

Mandatory Requirements

VitePress Frontmatter

Every page must have:

---
title: "Page Title"
description: "One-line description"
---

Mermaid Diagrams

  • Minimum 3–5 per page (scaled by scope: small=3, medium=4, large=5+)
  • Use at least 2 different diagram types — don't repeat the same type. Mix graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, flowchart as appropriate
  • Use autonumber in all sequenceDiagram blocks
  • Dark-mode colors (MANDATORY): node fills #2d333b, borders #6d5dfc, text #e6edf3
  • Subgraph backgrounds: #161b22, borders #30363d, lines #8b949e
  • If using inline style, use dark fills with ,color:#e6edf3
  • Do NOT use <br/> (use <br> or line breaks)
  • Diagram selection: structure → graph; behavior → sequence/state; data → ER; decisions → flowchart

Citations

  • Every non-trivial claim needs a citation with the resolved format:
    • Remote repo: [src/path/file.ts:42](REPO_URL/blob/BRANCH/src/path/file.ts#L42)
    • Local repo: (src/path/file.ts:42)
    • Line ranges: [src/path/file.ts:42-58](REPO_URL/blob/BRANCH/src/path/file.ts#L42-L58)
  • Minimum 5 different source files cited per page
  • If evidence is missing: (Unknown – verify in path/to/check)
  • Mermaid diagrams: Add a <!-- Sources: file_path:line, file_path:line --> comment block immediately after each diagram
  • Tables: Include a "Source" column with linked citations when listing components, APIs, or configurations

Structure

  • Overview (explain WHY) → Architecture → Components → Data Flow → Implementation → References → Related Pages
  • Use tables aggressively — prefer tables over prose for any structured information (APIs, configs, components, comparisons)
  • Summary tables first: Start each major section with an at-a-glance summary table before details
  • Use comparison tables when introducing technologies or patterns — always compare side-by-side
  • Include a "Source" column with linked citations in tables listing code artifacts
  • Use bold for key terms, inline code for identifiers and paths
  • Include pseudocode in a familiar language when explaining complex code paths
  • Progressive disclosure: Start with the big picture, then drill into specifics — don't front-load details

Cross-References Between Wiki Pages

  • Inline links: When mentioning a concept, component, or pattern covered on another wiki page, link to it inline using relative Markdown links: [Component Name](../NN-section/page-name.md) or [Section Title](../NN-section/page-name.md#heading-anchor)
  • Related Pages section: End every page with a "Related Pages" section listing connected wiki pages:
    ## Related Pages
    
    | Page | Relationship |
    |------|-------------|
    | [Authentication](../02-architecture/authentication.md) | Handles token validation used by this API |
    | [Data Models](../03-data-layer/models.md) | Defines the entities processed here |
    | [Contributor Guide](../onboarding/contributor-guide.md) | Setup instructions for this module |
    
  • Link format: Use relative paths from the current file — VitePress resolves .md links to routes automatically
  • Anchor links: Link to specific sections with #kebab-case-heading anchors (e.g., [error handling](../02-architecture/overview.md#error-handling))
  • Bidirectional where possible: If page A links to page B, page B should link back to page A

VitePress Compatibility

  • Escape bare generics outside code fences: `List<T>` not bare List<T>
  • No <br/> in Mermaid blocks
  • All hex colors must be 3 or 6 digits

More by microsoft

View all →

playwright-cli

microsoft

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

464

react-flow-node-ts

microsoft

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.

141

azure-communication-chat-java

microsoft

Build real-time chat applications with Azure Communication Services Chat Java SDK. Use when implementing chat threads, messaging, participants, read receipts, typing notifications, or real-time chat features.

00

agent-framework-azure-ai-py

microsoft

Build Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code interpreter, file search, web search), integrating MCP servers, managing conversation threads, or implementing streaming responses. Covers function tools, structured outputs, and multi-tool agents.

00

azure-eventhub-dotnet

microsoft

Azure Event Hubs SDK for .NET. Use for high-throughput event streaming: sending events (EventHubProducerClient, EventHubBufferedProducerClient), receiving events (EventProcessorClient with checkpointing), partition management, and real-time data ingestion. Triggers: "Event Hubs", "event streaming", "EventHubProducerClient", "EventProcessorClient", "send events", "receive events", "checkpointing", "partition".

00

wiki-changelog

microsoft

Analyzes git commit history and generates structured changelogs categorized by change type. Use when the user asks about recent changes, wants a changelog, or needs to understand what changed in the repository.

240

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

263781

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

201413

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

181270

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

206230

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

161194

rust-coding-skill

UtakataKyosui

Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.

162173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.