technical-doc-creator
Create structured, readable HTML technical documentation for APIs and systems.
Install
mkdir -p .claude/skills/technical-doc-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5799" && unzip -o skill.zip -d .claude/skills/technical-doc-creator && rm skill.zipInstalls to .claude/skills/technical-doc-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create HTML technical documentation with code blocks, API workflows, system architecture diagrams, and syntax highlighting. Use when users request technical documentation, API docs, API references, code examples, or developer documentation.Key capabilities
- →Generate HTML documentation templates
- →Structure API endpoint documentation
- →Create syntax-highlighted code blocks
- →Document system architecture diagrams
- →Define step-by-step developer workflows
How it works
The skill extracts API methods and parameters to populate predefined HTML templates, applying semantic colors for HTTP methods and syntax highlighting for code.
Inputs & outputs
When to use technical-doc-creator
- →Document API endpoints
- →Create technical developer guides
- →Generate system architecture docs
About this skill
Technical Documentation Creator
Create comprehensive HTML technical documentation with code examples and API workflows.
When to Use
- "Create API documentation for [endpoints]"
- "Generate technical docs for [system]"
- "Document API reference"
- "Create developer documentation"
Components
- Overview: purpose, key features, tech stack
- Getting Started: installation, setup, quick start
- API Reference: endpoints with request/response examples
- Code Examples: syntax-highlighted code blocks
- Architecture: system diagram (SVG)
- Workflows: step-by-step processes
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>[API/System] Documentation</title>
<style>
body { font-family: system-ui; max-width: 1000px; margin: 0 auto; }
pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; overflow-x: auto; }
.endpoint { background: #f7fafc; padding: 15px; margin: 10px 0; border-left: 4px solid #4299e1; }
code { background: #e2e8f0; padding: 2px 6px; border-radius: 3px; }
</style>
</head>
<body>
<h1>[System] Documentation</h1>
<!-- Overview, Getting Started, API Reference, Examples -->
</body>
</html>
API Endpoint Pattern
<div class="endpoint">
<h3><span style="color: #48bb78;">GET</span> /api/users/{id}</h3>
<p>Retrieve user by ID</p>
<h4>Request</h4>
<pre><code>curl -X GET https://api.example.com/users/123</code></pre>
<h4>Response</h4>
<pre><code>{
"id": 123,
"name": "John Doe",
"email": "[email protected]"
}</code></pre>
</div>
Code Block Pattern
<pre><code>// Installation
npm install package-name
// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>
Workflow
- Extract API endpoints, methods, parameters
- Create overview and getting started sections
- Document each endpoint with examples
- Add code snippets for common operations
- Include architecture diagram if relevant
- Write to
[system]-docs.html
Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).
When not to use it
- →Non-technical documentation requests
- →Projects requiring dynamic backend-integrated documentation
Limitations
- →Requires manual extraction of API details
- →Limited to the provided HTML structure
How it compares
It automates the creation of standardized HTML documentation structures rather than requiring manual formatting of each section.
Compared to similar skills
technical-doc-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| technical-doc-creator (this skill) | 1 | 9mo | Review | Beginner |
| wiki-page-writer | 5 | 3mo | No flags | Advanced |
| confluence-assistant | 1 | 5mo | Review | Beginner |
| docx-official | 0 | 4mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mhattingpete
View all by mhattingpete →You might also like
wiki-page-writer
microsoft
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.
confluence-assistant
tech-leads-club
Expert in Confluence operations using Atlassian MCP - automatically detects workspace Confluence configuration or prompts for site details. Use for searching, creating, updating pages, managing spaces, and adding comments with proper Markdown formatting.
docx-official
woodartcrafts
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tra
search-company-knowledge
atlassian
Search across company knowledge bases (Confluence, Jira, internal docs) to find and explain internal concepts, processes, and technical details. When Claude needs to: (1) Find or search for information about systems, terminology, processes, deployment, authentication, infrastructure, architecture, or technical concepts, (2) Search internal documentation, knowledge base, company docs, or our docs, (3) Explain what something is, how it works, or look up information, or (4) Synthesize information from multiple sources. Searches in parallel and provides cited answers.
wiki-sync
zoraxl
Use to sync the wiki from a merged PR or from a source doc/file path. Two modes — PR mode (post-merge: creates ADR if needed, flips ADR to accepted, updates wiki pages, appends log, records idempotency, archives related plan/source files) and doc mode (ingests existing implemented knowledge from a f
wiki
yangyuan-zhen
[OMX] Persistent markdown project wiki stored under .omx/wiki with keyword search and lifecycle capture