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.
1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
105 d ago
last touched
this folder, not the whole repository
Install
one command, takes just this skill from the repository
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
Every non-trivial claim needs a citation with the resolved format:
Remote repo: src/path/file.ts:42
Local repo: (src/path/file.ts:42)
Line ranges: src/path/file.ts:42-58
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 or Section Title
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)
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
How to use it
Copy the folder
Take microsoft/wiki-page-writer from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
Check the name does not clash
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.