skills.rest
PedroGiudice
PedroGiudiceCOMMUNITY
Explore all skills by this author →
GitHub

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

5|3|Updated Nov 4, 2025
Search Tags:#architecture#documentation#html#API#code#workflows
One-click install
npx skills add https://github.com/PedroGiudice/Claude-Code-Projetos --skill technical-doc-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: technical-doc-creator
Source: https://github.com/PedroGiudice/Claude-Code-Projetos/tree/main/skills/technical-doc-creator
Command: npx skills add https://github.com/PedroGiudice/Claude-Code-Projetos --skill technical-doc-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill creates HTML technical documentation featuring code blocks with syntax highlighting, API workflows, and architecture diagrams to communicate complex systems clearly.

Core Features & Use Cases

  • Overview & Getting Started: high-level intro and quick setup.
  • API Reference: endpoints with examples and workflows.
  • Code Examples: syntax-highlighted blocks for quick reference.
  • Architecture Diagrams: embedded SVG diagrams for system visuals.
  • Workflows: step-by-step processes for common tasks.

Quick Start

Use the HTML template to generate docs: provide system name and endpoints, then render to an HTML file.

Frequently Asked Questions about technical-doc-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate HTML technical documentation with code syntax highlighting?▼

This Skill generates comprehensive HTML technical documentation from API definitions and code examples, automatically applying syntax highlighting to code blocks, semantic markup, and responsive styling for production-ready docs.

Can I create API reference documentation with workflow diagrams?▼

Yes. The Skill produces API reference sections with endpoint examples, workflow steps, and embedded SVG architecture diagrams to visualize system interactions and communication flows.

What HTML structure does the generated documentation include?▼

Generated docs feature an Overview section, Getting Started guide, API Reference with endpoints, Code Examples with syntax highlighting, Architecture Diagrams as SVG, and Workflows for common tasks—all semantically marked and responsive.

Do I need to manually format code blocks in the HTML output?▼

No. The Skill automatically applies syntax highlighting to code blocks during HTML generation, eliminating manual formatting and ensuring consistent, readable code presentation.

Can I use this for system architecture documentation?▼

Yes. The Skill accepts system architectures as input and renders them as visual SVG diagrams within the HTML doc, making complex system designs clear and communicable to developers.

What input formats does the documentation generator accept?▼

Provide API definitions, system architecture descriptions, and code examples; the Skill transforms these inputs into structured HTML with syntax-highlighted code and embedded SVG diagrams.

Related Skills

Explore More Software Engineering Skills→
jal-cojal-co
143

jalco-writing-component-docs

Generate and review jalco UI component documentation against format specifications.

Community
Intermediate
officebeatsofficebeats
8

document-exporter

Convert Markdown files to PDF, HTML, and DOCX with embedded assets.

Community
Intermediate
unfazed-devunfazed-dev

mermaid-diagrams

Generate flowcharts, sequence diagrams, and ER diagrams in Mermaid syntax.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate