ReddRadar
Agent skill
technical-doc-creator
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.
Install this agent skill to your Project
npx add-skill https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/technical-doc-creator
SKILL.md
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": "john@example.com"
}</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).
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
mhattingpete/claude-skills-marketplace
git-pushing
Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to save and push their work. Also activates when user says "push changes", "commit and push", "push this", "push to github", or similar git workflow requests.
mhattingpete/claude-skills-marketplace
feature-planning
Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature, enhancement, or complex change.
mhattingpete/claude-skills-marketplace
review-implementing
Process and implement code review feedback systematically. Use when user provides reviewer comments, PR feedback, code review notes, or asks to implement suggestions from reviews.
mhattingpete/claude-skills-marketplace
test-fixing
Run tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite and failures occur, or requests to make tests pass.
mhattingpete/claude-skills-marketplace
ensemble-solving
Generate multiple diverse solutions in parallel and select the best. Use for architecture decisions, code generation with multiple valid approaches, or creative tasks where exploring alternatives improves quality.
mhattingpete/claude-skills-marketplace
code-execution
Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.
Didn't find tool you were looking for?