generating-documentation
npx skills add https://github.com/ancoleman/ai-design-components --skill generating-documentation
Agent 安装分布
Skill 文档
Documentation Generation
Generate comprehensive technical documentation across multiple layers: API documentation, code documentation, documentation sites, architecture decisions, and system diagrams.
When to Use This Skill
Use this skill when:
- Documenting REST or GraphQL APIs with OpenAPI specifications
- Creating code documentation for libraries (TypeScript, Python, Go, Rust)
- Building documentation sites for projects or products
- Recording architectural decisions (ADRs) for system design choices
- Generating diagrams to visualize system architecture or data flows
- Setting up automated documentation pipelines in CI/CD
Documentation Layers Overview
Technical documentation operates at five distinct layers:
Layer 1: API Documentation – OpenAPI specs for REST/GraphQL APIs (Swagger UI, Redoc, Scalar) Layer 2: Code Documentation – Generated from code comments (TypeDoc, Sphinx, godoc, rustdoc) Layer 3: Documentation Sites – Comprehensive guides and tutorials (Docusaurus, MkDocs) Layer 4: Architecture Decisions – ADRs using MADR template format Layer 5: Diagrams – Visual architecture (Mermaid, PlantUML, D2)
See references/api-documentation.md, references/code-documentation.md, and references/documentation-sites.md for detailed guides.
Quick Decision Framework
Which Documentation Layer?
API for external consumers?
â Layer 1: API Documentation (OpenAPI + Swagger UI/Redoc)
Code for maintainers?
â Layer 2: Code Documentation (TypeDoc/Sphinx/godoc/rustdoc)
Comprehensive guides?
â Layer 3: Documentation Site (Docusaurus/MkDocs)
Architectural decision?
â Layer 4: ADR (MADR template)
Visual system design?
â Layer 5: Diagrams (Mermaid/PlantUML/D2)
Tool Selection Matrix
| Need | Primary Tool | Best For |
|---|---|---|
| Doc Site | Docusaurus | Feature-rich React sites |
| Doc Site | MkDocs Material | Simple Python docs |
| API Docs (Interactive) | Swagger UI | Testing |
| API Docs (Read-Only) | Redoc | Professional design |
| TypeScript | TypeDoc | All TS projects |
| Python | Sphinx | All Python projects |
| Go | godoc | Built-in |
| Rust | rustdoc | Built-in |
| Diagrams | Mermaid | All-purpose |
API Documentation Quick Start
Create OpenAPI specification:
openapi: 3.1.0
info:
title: User API
version: 1.0.0
servers:
- url: https://api.example.com/v1
paths:
/users/{userId}:
get:
summary: Get a user
parameters:
- name: userId
in: path
required: true
schema:
type: string
responses:
'200':
description: Success
content:
application/json:
schema:
$ref: '#/components/schemas/User'
components:
schemas:
User:
type: object
required: [id, email, name]
properties:
id:
type: string
email:
type: string
format: email
name:
type: string
securitySchemes:
bearerAuth:
type: http
scheme: bearer
bearerFormat: JWT
security:
- bearerAuth: []
Render with Swagger UI, Redoc, or Scalar. See references/api-documentation.md for complete examples and templates/openapi-template.yaml for starter template.
Code Documentation Quick Start
TypeScript
/**
* Calculate the sum of two numbers.
*
* @param a - The first number
* @param b - The second number
* @returns The sum of a and b
*
* @example
* ```typescript
* const result = add(2, 3);
* console.log(result); // 5
* ```
*/
export function add(a: number, b: number): number {
return a + b;
}
Generate docs:
npm install -D typedoc
npx typedoc --entryPoints src/index.ts --out docs
Python
def calculate_total(items: list[dict], tax_rate: float = 0.0) -> float:
"""Calculate the total price including tax.
Args:
items: List of items with 'price' and 'quantity' keys.
tax_rate: Tax rate as decimal (e.g., 0.1 for 10%).
Returns:
Total price including tax.
Example:
>>> items = [{'price': 10, 'quantity': 2}]
>>> calculate_total(items, tax_rate=0.1)
22.0
"""
subtotal = sum(item['price'] * item['quantity'] for item in items)
return subtotal * (1 + tax_rate)
Generate docs:
pip install sphinx sphinx-rtd-theme
sphinx-quickstart docs
cd docs && make html
See references/code-documentation.md for Go and Rust examples.
Documentation Site Quick Start
Docusaurus
npx create-docusaurus@latest my-website classic
cd my-website
npm start
Basic config:
// docusaurus.config.js
module.exports = {
title: 'My Project',
url: 'https://docs.example.com',
themeConfig: {
navbar: {
items: [
{type: 'doc', docId: 'intro', label: 'Docs'},
],
},
},
presets: [
['@docusaurus/preset-classic', {
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
}],
],
};
MkDocs
pip install mkdocs mkdocs-material
mkdocs new my-project
mkdocs serve
Basic config:
# mkdocs.yml
site_name: My Project
theme:
name: material
features:
- navigation.tabs
- search.suggest
plugins:
- search
nav:
- Home: index.md
- Getting Started: getting-started.md
See references/documentation-sites.md for versioning and deployment.
Architecture Decision Records
Use MADR template for recording decisions:
# Use PostgreSQL for Primary Database
* Status: accepted
* Deciders: Engineering Team, CTO
* Date: 2025-01-15
## Context and Problem Statement
Application requires relational database with complex queries,
ACID transactions, JSON support, and full-text search.
## Decision Drivers
* Data integrity (ACID compliance)
* Performance (10K+ queries/second)
* Cost (open-source preferred)
* Features (JSONB, full-text search)
## Considered Options
* PostgreSQL
* MySQL
* Amazon Aurora
## Decision Outcome
Chosen "PostgreSQL" for best balance of features and cost.
### Positive Consequences
* Open-source with no licensing costs
* Advanced features (JSONB, full-text search)
* Strong ACID compliance
### Negative Consequences
* Self-hosting requires DevOps investment
* Horizontal scaling requires changes
Copy full template from templates/adr-template.md. See references/adr-guide.md for workflow and examples/adr/0001-database-selection.md for complete example.
Diagrams Quick Start
Create diagrams with Mermaid:
```mermaid
sequenceDiagram
User->>Frontend: Click "Login"
Frontend->>API: POST /auth/login
API->>Database: Verify credentials
Database-->>API: User found
API-->>Frontend: JWT token
Frontend->>User: Redirect to dashboard
```
Mermaid renders in GitHub, Docusaurus, and MkDocs. See references/diagram-generation.md for PlantUML and D2 examples.
Common Patterns
Design-First vs Code-First APIs
Design-First:
- Write OpenAPI spec
- Review with stakeholders
- Generate server stubs
- Implement handlers
Pros: Contract before implementation, parallel development Cons: Spec authoring can be verbose
Code-First:
- Implement API with decorators
- Generate OpenAPI from code
- Publish documentation
Pros: Faster development, spec matches code Cons: Documentation lags behind
Recommendation: Design-first for new APIs, code-first for existing.
Embedding API Docs in Sites
Docusaurus integration:
// docusaurus.config.js
plugins: [
['docusaurus-plugin-openapi-docs', {
config: {
api: {
specPath: 'openapi/api.yaml',
outputDir: 'docs/api',
},
},
}],
],
themes: ['docusaurus-theme-openapi-docs'],
See references/api-documentation.md for MkDocs integration.
CI/CD Automation
# .github/workflows/docs.yml
name: Documentation
on:
push:
branches: [main]
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- name: Generate API docs
run: npm run docs:api
- name: Generate code docs
run: npm run docs:code
- name: Build site
run: npm run docs:build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
See references/ci-cd-integration.md for validation and versioning.
When to Write an ADR
Write ADRs for:
â Technology selection (database, framework, cloud) â Architecture patterns (microservices, event-driven) â Decisions with trade-offs (pros/cons) â Team alignment needed
Don’t write ADRs for:
â Trivial decisions (naming, formatting) â Easily reversible (config tweaks) â Implementation details (document in code)
See references/adr-guide.md for workflow and examples.
Reference Documentation
For detailed guides:
references/api-documentation.md– OpenAPI, Swagger UI, Redoc, Scalar, design-first vs code-firstreferences/code-documentation.md– TypeDoc, Sphinx, godoc, rustdoc with examplesreferences/documentation-sites.md– Docusaurus and MkDocs setup, versioning, deploymentreferences/adr-guide.md– MADR template, workflow, when to write ADRsreferences/diagram-generation.md– Mermaid, PlantUML, D2 syntax and integrationreferences/ci-cd-integration.md– Automation, validation, deployment strategies
Templates
templates/adr-template.md– MADR template for Architecture Decision Recordstemplates/openapi-template.yaml– OpenAPI 3.1 specification starter
Examples
examples/openapi/– Complete OpenAPI specificationsexamples/typescript/– TypeDoc configuration and TSDoc examplesexamples/python/– Sphinx configuration and docstring examplesexamples/adr/– Real-world Architecture Decision Recordsexamples/diagrams/– Mermaid, PlantUML, D2 examples
Tool Recommendations
Based on research (December 2025):
Documentation Sites:
- Docusaurus – React-based, feature-rich (versioning, i18n, search)
- MkDocs Material – Python-based, simple, beautiful
API Documentation:
- Swagger UI – Interactive testing
- Redoc – Beautiful read-only
- Scalar – Modern 2025 design
Code Documentation:
- TypeScript: TypeDoc
- Python: Sphinx
- Go: godoc (built-in)
- Rust: rustdoc (built-in)
Diagrams:
- Mermaid – Most popular, GitHub-integrated
- PlantUML – UML standard
- D2 – Modern, declarative
Integration with Other Skills
api-patterns– API implementation and documentationbuilding-ci-pipelines– Automate documentation generationtesting-strategies– Document test patternssdk-design– Generate SDK documentation
Best Practices
- Docs-as-Code – Keep docs in version control
- Single Source of Truth – Generate from code/specs
- Automation – Generate in CI/CD pipelines
- Examples – Include working code examples
- Validation – Lint Markdown, validate specs
- Versioning – Version docs with releases
- Consistency – Use consistent terminology
- Maintenance – Update when code changes
Common Pitfalls
Documentation Drift – Docs become outdated â Automate generation, validate in CI/CD
Over-Documentation – Documenting obvious behavior â Focus on “why” not “what”
Fragmented Docs – Information scattered â Single site with clear navigation
No Examples – Theory without practice â Include runnable examples