Technical Doc Creator

Name: Technical Doc Creator
Author: mhattingpete

mhattingpete/claude-skills-marketplace

191 installs
656 repo stars
Updated July 25, 2026
mhattingpete/claude-skills-marketplace

Helps with ai & agent building tasks.

About

technical-doc-creator is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

technical-doc-creator
AI & Agent Building
AI-coding skill

Technical Doc Creator by the numbers

191 all-time installs (skills.sh)
+5 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #2,947 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill technical-doc-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/mhattingpete/claude-skills-marketplace/technical-doc-creator.svg)](https://skillselion.com/skills/mhattingpete/claude-skills-marketplace/technical-doc-creator)

Installs	191
repo stars	★ 656
Last updated	July 25, 2026
Repository	mhattingpete/claude-skills-marketplace ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

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

1. Overview: purpose, key features, tech stack 2. Getting Started: installation, setup, quick start 3. API Reference: endpoints with request/response examples 4. Code Examples: syntax-highlighted code blocks 5. Architecture: system diagram (SVG) 6. 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

1. Extract API endpoints, methods, parameters 2. Create overview and getting started sections 3. Document each endpoint with examples 4. Add code snippets for common operations 5. Include architecture diagram if relevant 6. Write to [system]-docs.html

Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[DOCUMENT_TITLE]</title>
    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px 20px;
            min-height: 100vh;
        }

        /* ===== CONTAINER ===== */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
        }

        /* ===== TYPOGRAPHY ===== */
        h1 {
            text-align: center;
            color: #2d3748;
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            text-align: center;
            color: #718096;
            font-size: 1.1em;
            margin-bottom: 40px;
        }

        h2.section-title {
            font-size: 1.8em;
            color: #2d3748;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }

        h3 {
            font-size: 1.4em;
            color: #2d3748;
            margin-bottom: 15px;
        }

        /* ===== LAYOUT SECTIONS ===== */
        .section {
            margin-bottom: 60px;
        }

        .diagram-container {
            background: #f7fafc;
            border-radius: 15px;
            padding: 30px;
            margin: 20px 0;
            border: 2px solid #e2e8f0;
        }

        /* ===== METRIC CARDS ===== */
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .metric-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .metric-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        /* ===== CODE BLOCKS ===== */
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            margin: 20px 0;
            line-height: 1.6;
        }

        .highlight {
            color: #fbbf24;
            font-weight: bold;
        }

        /* ===== EXAMPLE BOXES ===== */
        .example-box {
            background: #fff;
            border: 2px solid #667eea;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }

        .example-title {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        /* ===== LEGEND ===== */
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
            padding: 20px;
            background: #edf2f7;
            border-radius: 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .legend-box {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            border: 2px solid #2d3748;
        }

        /* ===== SVG STYLING ===== */
        svg {
            width: 100%;
            height: auto;
        }

        svg text {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* ===== FOOTER ===== */
        .footer {
            text-align: center;
            margin-top: 60px;
            padding: 30px;
            background: #f7fafc;
            border-radius: 10px;
        }

        .footer p {
            margin: 10px 0;
        }

        .footer-main {
            font-size: 1.1em;
            color: #4a5568;
            font-weight: 500;
        }

        .footer-sub {
            font-size: 0.95em;
            color: #718096;
        }

        .footer-meta {
            font-size: 0.85em;
            color: #a0aec0;
            margin-top: 15px;
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .section-title {
                font-size: 1.4em;
            }

            .metric-grid {
                grid-template-columns: 1fr;
            }

            .metric-value {
                font-size: 2em;
            }

            .legend {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* ===== UTILITY CLASSES ===== */
        .text-center { text-align: center; }
        .mt-20 { margin-top: 20px; }
        .mb-20 { margin-bottom: 20px; }
        .p-20 { padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>[DOCUMENT_TITLE]</h1>
        <p class="subtitle">[DOCUMENT_SUBTITLE]</p>

        <!-- METRIC CARDS SECTION (Optional) -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-value">[VALUE_1]</div>
                <div class="metric-label">[LABEL_1]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_2]</div>
                <div class="metric-label">[LABEL_2]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_3]</div>
                <div class="metric-label">[LABEL_3]</div>
            </div>
        </div>

        <!-- MAIN CONTENT SECTIONS -->
        <div class="section">
            <h2 class="section-title">1. [SECTION_TITLE]</h2>

            <div class="diagram-container">
                <!-- SVG diagrams go here -->
                <svg viewBox="0 0 1200 600">
                    <!-- SVG content -->
                </svg>
            </div>

            <div class="example-box">
                <div class="example-title">[EXAMPLE_TITLE]</div>
                <p>[EXAMPLE_CONTENT]</p>
            </div>

            <div class="code-block">
<span class="highlight">[HIGHLIGHTED_TERM]:</span> [CODE_CONTENT]
            </div>
        </div>

        <!-- LEGEND SECTION (Optional) -->
        <div class="legend">
            <div class="legend-item">
                <div class="legend-box" style="background: #4299e1;"></div>
                <span>[LEGEND_ITEM_1]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #48bb78;"></div>
                <span>[LEGEND_ITEM_2]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #f59e0b;"></div>
                <span>[LEGEND_ITEM_3]</span>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <p class="footer-main"><strong>[FOOTER_MAIN_TEXT]</strong></p>
            <p class="footer-sub">[FOOTER_SUB_TEXT]</p>
            <p class="footer-meta">[FOOTER_META_TEXT]</p>
        </div>
    </div>
</body>
</html>

Design Patterns Reference

Complete design system guidelines for creating visually stunning HTML documentation.

Color System

Primary Palette

Gradient Background:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Use for: Body background, primary branding elements
Creates depth and visual interest

Accent Colors:

Primary Purple-Blue: #667eea
Secondary Purple: #764ba2
Use for: Headings, borders, key UI elements

Semantic Color Scales

Success / Confirmed / Positive

Base: #48bb78 (green)
Dark: #2f855a (darker green, for strokes)
Light: #e6f4ea (pale green, for backgrounds)
Use for: Completed tasks, success messages, positive metrics

Warning / Uncertain / Attention

Base: #f59e0b (amber)
Dark: #d97706 (darker amber, for strokes)
Light: #fffbeb (pale amber, for backgrounds)
Use for: In-progress items, warnings, items needing attention

Info / Primary / Standard

Base: #4299e1 (blue)
Dark: #2b6cb0 (darker blue, for strokes)
Light: #e6f2ff (pale blue, for backgrounds)
Use for: Standard information, primary actions, neutral states

Error / Critical / Negative

Base: #f56565 (red)
Dark: #c53030 (darker red, for strokes)
Light: #fff5f5 (pale red, for backgrounds)
Use for: Errors, critical issues, failed states

Process / Action / Secondary

Base: #ed8936 (orange)
Dark: #c05621 (darker orange, for strokes)
Light: #fff5e6 (pale orange, for backgrounds)
Use for: Processing states, secondary actions

Special / Highlight / Tertiary

Base: #9f7aea (purple)
Dark: #6b46c1 (darker purple, for strokes)
Light: #f3e6ff (pale purple, for backgrounds)
Use for: Special features, highlights, premium items

Neutral Palette

Text Colors:

Dark (Primary text): #2d3748 - Headings, important content
Medium (Secondary text): #718096 - Body text, labels
Light (Tertiary text): #a0aec0 - Captions, metadata

UI Elements:

Dark border: #cbd5e0
Light border: #e2e8f0
Dark background: #edf2f7
Light background: #f7fafc
White: #ffffff

Color Contrast Guidelines

WCAG AA Compliance:

Minimum contrast ratio: 4.5:1 for normal text
Large text (18pt+ or 14pt+ bold): 3:1 minimum
Safe combinations:
Dark text (#2d3748) on light backgrounds (#f7fafc, #ffffff)
White text on colored backgrounds (all semantic base colors pass)
Medium text (#718096) on white only

Typography

Font Families

Primary (Sans-serif):

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Use for: All body text, headings, UI elements
Fallback chain ensures availability across platforms

Code (Monospace):

font-family: 'Courier New', monospace;

Use for: Code blocks, technical data, fixed-width content

Type Scale

Display / Hero:

Size: 2.5em (40px at 16px base)
Weight: Bold (700)
Use for: Page title (h1)
Special effect: Gradient text clip

Section Heading:

Size: 1.8em (28.8px)
Weight: Bold (700)
Color: #2d3748
Use for: Major sections (h2)
Decoration: Bottom border 3px solid #667eea

Subsection:

Size: 1.4em (22.4px)
Weight: Bold (700)
Color: #2d3748
Use for: Subsections (h3)

Body:

Size: 1em (16px base)
Weight: Normal (400)
Line height: 1.6
Color: #2d3748 or #4a5568
Use for: Paragraphs, general content

Label / Caption:

Size: 0.9-0.95em (14.4-15.2px)
Weight: Normal (400) or Medium (500)
Color: #718096
Use for: Metric labels, chart labels, form labels

Small / Meta:

Size: 0.85em (13.6px)
Weight: Normal (400)
Color: #a0aec0
Use for: Footnotes, timestamps, metadata

SVG Text:

Small labels: 11-12px
Standard text: 13-14px
Emphasis: 15-16px
Large values: 18-24px
Metric displays: 48px+

Text Effects

Gradient Text (for h1):

h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Code Highlighting:

.highlight {
    color: #fbbf24;  /* Amber highlight */
    font-weight: bold;
}

Spacing & Layout

Container Sizing

Max Width:

Container: 1400px
Comfortable reading: 800-1000px
Full width sections: No max-width

Padding:

Desktop container: 40px
Mobile container: 20px
Diagram containers: 30px
Content boxes: 20px
Metric cards: 25px

Margins:

Section bottom: 60px
Element groups: 30px
Individual elements: 20px
Small gaps: 10px

Grid Systems

Metric Grid:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;

Automatically responsive
Minimum card width: 200px
Equal width distribution

Custom Grids:

2-column: grid-template-columns: 1fr 1fr;
3-column: grid-template-columns: repeat(3, 1fr);
Sidebar layout: grid-template-columns: 300px 1fr;

Flexbox Patterns

Horizontal Center:

display: flex;
justify-content: center;
align-items: center;

Space Between:

display: flex;
justify-content: space-between;
align-items: center;

Wrapped Row:

display: flex;
flex-wrap: wrap;
gap: 20px;

Visual Effects

Shadows

Card Shadow:

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

Use for: Main container, elevated cards

Metric Card Shadow:

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

Use for: Metric cards, smaller elevation

Subtle Shadow:

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Use for: Buttons, small cards, hover states

Border Radius

Large (Containers):

Container: 20px
Diagram containers: 15px

Medium (Cards & Boxes):

Metric cards: 15px
Content boxes: 10px
SVG shapes: 10px

Small (UI Elements):

Buttons: 8px
Small badges: 5px

Pills / Rounded:

Full rounded: 50% (circles) or 9999px (pills)
Timeline progress bars: 20px

Opacity

Overlays:

Light overlay: 0.3
Medium overlay: 0.5-0.6
Strong overlay: 0.8-0.9

Hover States:

Slight fade: 0.9
Clear fade: 0.7-0.8

Disabled:

0.5-0.6

Responsive Breakpoints

Mobile First Strategy

Breakpoints:

/* Mobile: default styles, no media query needed */

/* Tablet */
@media (min-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }

/* Large Desktop */
@media (min-width: 1440px) { ... }

Common Pattern (Desktop First):

@media (max-width: 768px) {
    .container { padding: 20px; }
    h1 { font-size: 1.8em; }
    .section-title { font-size: 1.4em; }
    .metric-grid { grid-template-columns: 1fr; }
}

Responsive Typography

Desktop:

h1: 2.5em
h2: 1.8em
h3: 1.4em
body: 1em

Mobile (max-width: 768px):

h1: 1.8em
h2: 1.4em
h3: 1.2em
body: 0.95em

SVG Text Scaling:

Use viewBox for automatic scaling
Font sizes in px remain constant
Increase viewBox dimensions rather than reducing font sizes

Component Patterns

Metric Cards

Standard Pattern:

<div class="metric-card">
    <div class="metric-value">[LARGE NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

With Custom Color:

<div class="metric-card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);">
    <div class="metric-value">✓ [NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

Code Blocks

Standard:

<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
    Indented content
</div>

CSS:

.code-block {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    overflow-x: auto;
    line-height: 1.6;
}

Example Boxes

Pattern:

<div class="example-box">
    <div class="example-title">[TITLE]</div>
    <p>[CONTENT]</p>
</div>

CSS:

.example-box {
    background: #fff;
    border: 2px solid #667eea;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

Legends

Pattern:

<div class="legend">
    <div class="legend-item">
        <div class="legend-box" style="background: #4299e1;"></div>
        <span>[DESCRIPTION]</span>
    </div>
    <!-- More items -->
</div>

CSS:

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: #edf2f7;
    border-radius: 10px;
}

SVG Styling

Default SVG Styles

Container:

svg {
    width: 100%;
    height: auto;
}

Text:

svg text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Common Stroke/Fill Combinations

Primary Box:

Fill: #4299e1
Stroke: #2b6cb0
Stroke-width: 3

Success Box:

Fill: #48bb78
Stroke: #2f855a
Stroke-width: 3

Warning Box:

Fill: #f59e0b
Stroke: #d97706
Stroke-width: 3

Neutral/Pending:

Fill: #cbd5e0
Stroke: #a0aec0
Stroke-width: 2-3

ViewBox Guidelines

Common Aspect Ratios:

Wide: viewBox="0 0 1200 400" (3:1)
Standard: viewBox="0 0 1200 600" (2:1)
Balanced: viewBox="0 0 1200 800" (3:2)
Square: viewBox="0 0 600 600" (1:1)
Portrait: viewBox="0 0 800 1000" (4:5)

Coordinate System:

Origin: Top-left (0, 0)
X increases rightward
Y increases downward
Units are relative to viewBox

Accessibility

Color Blindness

Safe Patterns:

Don't rely on color alone (use icons, labels, patterns)
Use both fill and stroke for differentiation
Ensure shapes differ (circle vs square vs diamond)
Add text labels to all visual elements

Color Combinations to Avoid:

Red/green alone (common color blindness)
Blue/purple alone (hard to distinguish)
Low contrast combinations

Screen Readers

HTML Structure:

Use semantic tags: <section>, <article>, <header>, <footer>
Proper heading hierarchy: h1 → h2 → h3
Descriptive text around SVG diagrams

ARIA (if needed):

<svg aria-labelledby="chart-title" role="img">
    <title id="chart-title">Process Flow Diagram</title>
    <!-- SVG content -->
</svg>

Keyboard Navigation

Ensure all interactive elements are focusable
Visible focus indicators
Logical tab order

Animation (Optional)

Subtle Transitions

Hover Effects:

.metric-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

Fade In:

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section {
    animation: fadeIn 0.5s ease-in;
}

Note: Keep animations subtle and optional - avoid distracting from content.

SVG Component Library

Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.

SVG Fundamentals

Basic Structure

<svg viewBox="0 0 1200 800" style="width: 100%; height: auto;">
    <defs>
        <!-- Reusable definitions (markers, gradients, patterns) -->
    </defs>

    <g id="group-name">
        <!-- Grouped elements -->
    </g>

    <!-- Direct elements -->
</svg>

ViewBox Explained

Format: viewBox="min-x min-y width height" Example: viewBox="0 0 1200 800"

min-x, min-y: Usually 0 0 (top-left origin)
width, height: Virtual coordinate system dimensions
SVG scales to fit container while maintaining aspect ratio
Larger viewBox = more space for content

Common Sizes:

<!-- Wide flowchart -->
<svg viewBox="0 0 1200 400">

<!-- Standard diagram -->
<svg viewBox="0 0 1200 600">

<!-- Detailed flowchart -->
<svg viewBox="0 0 1200 800">

<!-- Square chart -->
<svg viewBox="0 0 600 600">

<!-- Vertical timeline -->
<svg viewBox="0 0 800 1000">

Coordinate System

X-axis: Left (0) to right (positive)
Y-axis: Top (0) to bottom (positive)
Center of 1200×800 viewBox: (600, 400)
Units: Relative to viewBox (not pixels)

Basic Shapes

Rectangle

Standard Rectangle:

<rect x="100" y="100" width="200" height="100"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Rounded Rectangle:

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

rx: Horizontal corner radius
ry: Vertical corner radius (defaults to rx if omitted)

Process Box with Text:

<rect x="50" y="50" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="150" y="95" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    Process Name
</text>
<text x="150" y="115" text-anchor="middle" fill="white" font-size="12">
    Subtitle
</text>

Position Calculation:

Text X: rect.x + (rect.width / 2) for center
Text Y: rect.y + (rect.height / 2) for vertical center (approximately)
Baseline adjustment: Add 5-10px to Y for visual centering

Circle

Basic Circle:

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>

cx, cy: Center coordinates
r: Radius

Circle with Text (Start/End Node):

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="300" y="205" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    START
</text>

Small Marker Circle:

<circle cx="300" cy="200" r="15"
        fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Ellipse

<ellipse cx="400" cy="200" rx="120" ry="60"
         fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

rx: Horizontal radius
ry: Vertical radius

Path Shapes

Diamond (Decision Node)

Diamond Formula:

Top:    (center-x, top-y)
Right:  (right-x, center-y)
Bottom: (center-x, bottom-y)
Left:   (left-x, center-y)

Example (100px wide, 100px tall, centered at 600, 150):

<path d="M 600 100 L 650 150 L 600 200 L 550 150 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
<text x="600" y="155" text-anchor="middle" font-size="14" font-weight="bold">
    Decision?
</text>

Larger Diamond (200×100):

<path d="M 600 130 L 700 130 L 750 180 L 700 230 L 500 230 L 450 180 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>

Hexagon (Preparation)

Horizontal Hexagon:

<path d="M 900 75 L 1050 75 L 1100 100 L 1050 125 L 900 125 L 850 100 Z"
      fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

Pattern:

M [left-mid-x] [top-y]          (start left of top edge)
L [right-mid-x] [top-y]         (top edge)
L [right-x] [center-y]          (top-right slope)
L [right-mid-x] [bottom-y]      (bottom edge)
L [left-mid-x] [bottom-y]       (bottom edge)
L [left-x] [center-y]           (top-left slope)
Z                                (close path)

Parallelogram

<path d="M 100 100 L 280 100 L 250 150 L 70 150 Z"
      fill="#ed8936" stroke="#c05621" stroke-width="3"/>

Custom Polygons

Triangle:

<path d="M 500 100 L 600 200 L 400 200 Z"
      fill="#f56565" stroke="#c53030" stroke-width="3"/>

Pentagon:

<path d="M 500 100 L 580 150 L 550 230 L 450 230 L 420 150 Z"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Lines & Arrows

Straight Lines

Horizontal:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#2d3748" stroke-width="3"/>

Vertical:

<line x1="200" y1="100" x2="200" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Diagonal:

<line x1="100" y1="100" x2="300" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Dashed Line:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5"/>

stroke-dasharray="dash,gap": Pattern of dashes and gaps
Common patterns: "5,5" (small), "10,5" (medium), "20,10" (large)

Path-based Lines

Straight line with path:

<path d="M 100 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

fill="none": Prevents filling (required for non-closed paths used as lines)

L-shaped connector:

<path d="M 250 100 L 400 100 L 400 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Multi-segment:

<path d="M 100 100 L 200 100 L 200 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Arrow Markers

Standard Arrowhead Definition:

<defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
    </marker>
</defs>

markerWidth/Height: Size of marker viewport
refX/refY: Anchor point (where arrow attaches to line)
orient="auto": Rotates to match line angle

Colored Arrows:

<defs>
    <marker id="arrowhead-success" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
    </marker>

    <marker id="arrowhead-error" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#f56565"/>
    </marker>
</defs>

Using Arrows:

<!-- Arrow at end -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-end="url(#arrowhead)"/>

<!-- Arrow at start -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)"/>

<!-- Arrows at both ends -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)" marker-end="url(#arrowhead)"/>

Curved Lines (Bezier Curves)

Quadratic Bezier (Q):

<path d="M 100 200 Q 200 100 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: Q control-x control-y end-x end-y
One control point

Cubic Bezier (C):

<path d="M 100 200 C 150 100, 250 100, 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: C control1-x control1-y control2-x control2-y end-x end-y
Two control points (more control)

Smooth Curve Through Points:

<path d="M 100 200 Q 150 150 200 200 T 300 200"
      stroke="#4299e1" stroke-width="3" fill="none"/>

T: Smooth continuation of quadratic curve

Text Elements

Basic Text

<text x="100" y="100" font-size="16" fill="#2d3748">
    Simple Text
</text>

Text Anchoring

Horizontal Alignment:

<!-- Left-aligned (default) -->
<text x="100" y="100" text-anchor="start">Left</text>

<!-- Center-aligned -->
<text x="100" y="100" text-anchor="middle">Center</text>

<!-- Right-aligned -->
<text x="100" y="100" text-anchor="end">Right</text>

Vertical Alignment:

<!-- Baseline (default) -->
<text x="100" y="100" dominant-baseline="auto">Baseline</text>

<!-- Middle -->
<text x="100" y="100" dominant-baseline="middle">Middle</text>

<!-- Hanging (top) -->
<text x="100" y="100" dominant-baseline="hanging">Top</text>

Note: For reliable vertical centering, calculate Y position manually rather than relying on dominant-baseline (browser support varies).

Text Styling

<text x="100" y="100"
      font-size="18"
      font-weight="bold"
      font-style="italic"
      fill="#2d3748"
      opacity="0.8">
    Styled Text
</text>

Font Families in SVG:

<text x="100" y="100" font-family="'Segoe UI', sans-serif">
    Custom Font
</text>

Multi-line Text

Using Multiple <text> Elements:

<text x="150" y="90" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Line 1
</text>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="12">
    Line 2
</text>
<text x="150" y="125" text-anchor="middle" fill="white" font-size="11">
    Line 3
</text>

Line Spacing: Typically 15-25px between lines depending on font size

Text on Path

<defs>
    <path id="curve" d="M 100 200 Q 300 100 500 200" fill="none"/>
</defs>

<text font-size="16" fill="#2d3748">
    <textPath href="#curve">
        Text following the curve
    </textPath>
</text>

Gradients

Linear Gradient

<defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#4299e1;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#2b6cb0;stop-opacity:1" />
    </linearGradient>
</defs>

<rect x="100" y="100" width="200" height="100" fill="url(#blueGradient)"/>

Gradient Directions:

Horizontal: x1="0%" y1="0%" x2="100%" y2="0%"
Vertical: x1="0%" y1="0%" x2="0%" y2="100%"
Diagonal: x1="0%" y1="0%" x2="100%" y2="100%"

Radial Gradient

<defs>
    <radialGradient id="radialGlow">
        <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.5" />
    </radialGradient>
</defs>

<circle cx="300" cy="200" r="80" fill="url(#radialGlow)"/>

Multi-stop Gradients

<linearGradient id="multiColor" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#48bb78" />
    <stop offset="50%" style="stop-color:#f59e0b" />
    <stop offset="100%" style="stop-color:#f56565" />
</linearGradient>

Grouping & Reuse

Groups (<g>)

<g id="icon-group" transform="translate(100, 100)">
    <circle r="30" fill="#4299e1"/>
    <text y="5" text-anchor="middle" fill="white" font-weight="bold">✓</text>
</g>

Benefits:

Apply transformations to multiple elements
Organize related elements
Apply styles to all children

Use Element

Define once:

<defs>
    <g id="status-icon">
        <circle r="15" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
        <text text-anchor="middle" fill="white" font-size="12" font-weight="bold">✓</text>
    </g>
</defs>

Reuse multiple times:

<use href="#status-icon" x="100" y="100"/>
<use href="#status-icon" x="300" y="100"/>
<use href="#status-icon" x="500" y="100"/>

Symbol Element

<defs>
    <symbol id="check-icon" viewBox="0 0 30 30">
        <circle cx="15" cy="15" r="15" fill="#48bb78"/>
        <path d="M 8 15 L 13 20 L 22 10" stroke="white" stroke-width="3"
              fill="none" stroke-linecap="round"/>
    </symbol>
</defs>

<use href="#check-icon" x="100" y="100" width="30" height="30"/>
<use href="#check-icon" x="200" y="100" width="50" height="50"/>

Symbol vs Group:

Symbol has its own viewBox (scalable)
Symbol not rendered unless used
Better for reusable icons

Transformations

Translate (Move)

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100)"/>

Moves shape to new position
Original x, y still apply (total position = original + translate)

Rotate

<rect x="100" y="100" width="100" height="50" fill="#4299e1"
      transform="rotate(45 150 125)"/>

Format: rotate(angle center-x center-y)
Angle in degrees
Rotates around specified center point

Scale

<circle cx="200" cy="200" r="30" fill="#48bb78"
        transform="scale(1.5)"/>

scale(factor): Uniform scaling
scale(x-factor, y-factor): Non-uniform scaling

Combined Transformations

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100) rotate(15) scale(1.2)"/>

Applied right to left: scale → rotate → translate

Advanced Patterns

Rounded Progress Bar

<!-- Background -->
<rect x="150" y="80" width="800" height="40" rx="20" fill="#e2e8f0"/>

<!-- Progress (60%) -->
<rect x="150" y="80" width="480" height="40" rx="20" fill="#48bb78"/>

Donut Chart (Simplified)

<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"/>

Multi-segment Donut:

<!-- Segment 1 (50% of circle = 471 units out of 942 total circumference) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"
        stroke-dasharray="471 471"
        transform="rotate(-90 300 300)"/>

<!-- Segment 2 (30%) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#48bb78" stroke-width="80"
        stroke-dasharray="283 659"
        stroke-dashoffset="-471"
        transform="rotate(-90 300 300)"/>

Circumference Formula: 2 × π × radius = 2 × 3.14159 × 150 ≈ 942

Drop Shadow Filter

<defs>
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</defs>

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" filter="url(#drop-shadow)"/>

Clipping Path

<defs>
    <clipPath id="rounded-clip">
        <rect x="100" y="100" width="200" height="150" rx="15"/>
    </clipPath>
</defs>

<image x="100" y="100" width="200" height="150"
       href="image.jpg" clip-path="url(#rounded-clip)"/>

Chart Components

Bar Chart Bar

<rect x="200" y="150" width="150" height="200" rx="5"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="275" y="260" text-anchor="middle" fill="white"
      font-size="24" font-weight="bold">
    456
</text>

Axis Lines

<!-- X-axis -->
<line x1="100" y1="350" x2="1100" y2="350"
      stroke="#2d3748" stroke-width="2"/>

<!-- Y-axis -->
<line x1="100" y1="350" x2="100" y2="80"
      stroke="#2d3748" stroke-width="2"/>

<!-- Grid lines -->
<line x1="100" y1="280" x2="1100" y2="280"
      stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>

Data Point Marker

<circle cx="300" cy="200" r="6" fill="#4299e1"
        stroke="white" stroke-width="2"/>

Best Practices

Coordinate Calculation

Center Text in Rectangle:

textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)

Position Diamond Points:

centerX = 600, centerY = 180
halfWidth = 100, halfHeight = 50

top:    (centerX, centerY - halfHeight)
right:  (centerX + halfWidth, centerY)
bottom: (centerX, centerY + halfHeight)
left:   (centerX - halfWidth, centerY)

Performance Tips

Limit total SVG elements per diagram to ~500-1000
Use <use> for repeated elements
Avoid overly complex paths
Minimize filter usage (shadows, blurs)
Group related elements

Readability Guidelines

Minimum stroke-width: 2px for visibility
Minimum font-size: 11px for labels, 14px for emphasis
Minimum touch target: 30×30px for interactive elements
White space: 20-30px between major elements
Contrast: Stroke should be darker than fill

Debugging SVG

Visible Boundaries:

<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
      fill="none" stroke="red" stroke-width="1"/>

Grid Overlay:

<!-- Shows 100px grid -->
<line x1="0" y1="100" x2="1200" y2="100" stroke="pink" stroke-width="1"/>
<line x1="0" y1="200" x2="1200" y2="200" stroke="pink" stroke-width="1"/>
<!-- ... repeat for debugging ... -->

Icon Library

Checkmark

<path d="M 8 15 L 13 20 L 22 10"
      stroke="#48bb78" stroke-width="3" fill="none"
      stroke-linecap="round" stroke-linejoin="round"/>

X (Close)

<path d="M 10 10 L 20 20 M 20 10 L 10 20"
      stroke="#f56565" stroke-width="3"
      stroke-linecap="round"/>

Warning Triangle

<path d="M 15 5 L 25 23 L 5 23 Z"
      fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="14">!</text>

Info Circle

<circle cx="15" cy="15" r="12" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="16">i</text>

Related skills

Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k

Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k

CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k

Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k

Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72

Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10

AI & Agent Buildingagents