zhongwei/gh-mhattingpete-claude-skills-marketplace-visual-documentation-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:40:19 +08:00
commit 87a970c077
26 changed files with 9131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.claude-plugin/plugin.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "visual-documentation-skills",
"description": "Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams",
"version": "1.1.0",
"author": {
"name": "mhattingpete",
"email": "noreply@github.com"
},
"skills": [
"./skills"
]
}

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# visual-documentation-skills
Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams

133
plugin.lock.json Normal file
View File

@@ -0,0 +1,133 @@
{
"$schema": "internal://schemas/plugin.lock.v1.json",
"pluginId": "gh:mhattingpete/claude-skills-marketplace:visual-documentation-plugin",
"normalized": {
"repo": null,
"ref": "refs/tags/v20251128.0",
"commit": "e1b921f8522763184ca4200be24f2b58cdf75b77",
"treeHash": "542c2f025cb160ae43f564aaa6edf2257caa32c33747a67afca7f8ead716dffe",
"generatedAt": "2025-11-28T10:27:05.608735Z",
"toolVersion": "publish_plugins.py@0.2.0"
},
"origin": {
"remote": "git@github.com:zhongweili/42plugin-data.git",
"branch": "master",
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
},
"manifest": {
"name": "visual-documentation-skills",
"description": "Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams",
"version": "1.1.0"
},
"content": {
"files": [
{
"path": "README.md",
"sha256": "b1fce16439923f602bedee190a58fa2d501f1db361d38e8147fb4c5c6e5ed7ab"
},
{
"path": ".claude-plugin/plugin.json",
"sha256": "647dd042914e2c9dde2dd0842f936d068ef6b6f137066aed64cb97cfbaa74b1c"
},
{
"path": "skills/architecture-diagram-creator/SKILL.md",
"sha256": "7d506e3fc0beee3ba91f97df6465d0f4d0fe2daf7b5ffa369ba876c9ab193992"
},
{
"path": "skills/architecture-diagram-creator/references/example_architecture.html",
"sha256": "d30537ade03fdf77fba19004a673c945fce48d32175bc80646c9b857f26db725"
},
{
"path": "skills/architecture-diagram-creator/assets/templates/base_template.html",
"sha256": "d4d60f4945eb0ad841ff0c30509c17557a6fb21302a37edeb17489806ad59f41"
},
{
"path": "skills/architecture-diagram-creator/assets/templates/architecture_components.html",
"sha256": "d92f415cfc672bbbc11bc658bdd99e80de0305313e3712a629ae4d7257725ea2"
},
{
"path": "skills/flowchart-creator/SKILL.md",
"sha256": "84bba5e47c6efd797cf116b42d071244dadef72ddd87169b9eca3563a0db298b"
},
{
"path": "skills/flowchart-creator/references/design_patterns.md",
"sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b"
},
{
"path": "skills/flowchart-creator/references/svg_library.md",
"sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59"
},
{
"path": "skills/flowchart-creator/assets/templates/base_template.html",
"sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b"
},
{
"path": "skills/flowchart-creator/assets/templates/flowchart_components.html",
"sha256": "2a572187626ae2243467db8a8ed5f6b9f0ecaaef02e1dcdaf42ce2880ed91f81"
},
{
"path": "skills/timeline-creator/SKILL.md",
"sha256": "b74e45f70ccf06c069a3961ea828f92655e3f6ad70dff4f64271967d88c59a6e"
},
{
"path": "skills/timeline-creator/references/design_patterns.md",
"sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b"
},
{
"path": "skills/timeline-creator/references/svg_library.md",
"sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59"
},
{
"path": "skills/timeline-creator/assets/templates/base_template.html",
"sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b"
},
{
"path": "skills/timeline-creator/assets/templates/timeline_components.html",
"sha256": "ed83636910941c9d46dc08989f2aa337a07db571680d6722749ebea195216015"
},
{
"path": "skills/dashboard-creator/SKILL.md",
"sha256": "777b28c4a7bab88398292de458ecb603d017ce07f47da47dad210ae76d854333"
},
{
"path": "skills/dashboard-creator/references/design_patterns.md",
"sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b"
},
{
"path": "skills/dashboard-creator/references/svg_library.md",
"sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59"
},
{
"path": "skills/dashboard-creator/assets/templates/base_template.html",
"sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b"
},
{
"path": "skills/dashboard-creator/assets/templates/dashboard_components.html",
"sha256": "21e7b4a9320bca11fecb455bdf47f36ca193c4130e22149c824ab071b26872a1"
},
{
"path": "skills/technical-doc-creator/SKILL.md",
"sha256": "8fa5ccc6d5d11befaa90ffe2904d7bad4b56eb5ad5c701c2c14b60560f61f7e5"
},
{
"path": "skills/technical-doc-creator/references/design_patterns.md",
"sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b"
},
{
"path": "skills/technical-doc-creator/references/svg_library.md",
"sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59"
},
{
"path": "skills/technical-doc-creator/assets/templates/base_template.html",
"sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b"
}
],
"dirSha256": "542c2f025cb160ae43f564aaa6edf2257caa32c33747a67afca7f8ead716dffe"
},
"security": {
"scannedAt": null,
"scannerVersion": null,
"flags": []
}
}

82
skills/architecture-diagram-creator/SKILL.md Normal file
View File

@@ -0,0 +1,82 @@
---
name: architecture-diagram-creator
description: Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
---
# Architecture Diagram Creator
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
## When to Use
- "Create architecture diagram for [project]"
- "Generate high-level overview"
- "Document system architecture"
- "Show data flow and processing pipeline"
## Components to Include
1. **Business Context**: objectives, users, value, metrics
2. **Data Flow**: sources → processing → outputs with SVG diagram
3. **Processing Pipeline**: multi-stage visualization
4. **System Architecture**: layered components (data/processing/services/output)
5. **Features**: functional and non-functional requirements
6. **Deployment**: model, prerequisites, workflows
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project] Architecture</title>
<style>
body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
```
## SVG Pattern for Data Flow
```html
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
```
## Workflow
1. Analyze project (README, code structure)
2. Extract: purpose, data sources, processing, tech stack, outputs
3. Create HTML with all 6 sections
4. Use semantic colors for visual hierarchy
5. Write to `[project]-architecture.html`
Keep diagrams clear, use consistent styling, include real project details.

304
skills/architecture-diagram-creator/assets/templates/architecture_components.html Normal file
View File

@@ -0,0 +1,304 @@
<!-- ========================================
ARCHITECTURE DIAGRAM SVG COMPONENTS
Reusable SVG patterns for architecture diagrams
======================================== -->
<!-- ===== SVG MARKERS & DEFINITIONS ===== -->
<defs>
<!-- Standard arrow marker -->
<marker id="arrowhead" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
</marker>
<!-- Green arrow marker (for success paths) -->
<marker id="arrowhead-green" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
</marker>
<!-- Blue arrow marker (for data flow) -->
<marker id="arrowhead-blue" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#4299e1"/>
</marker>
<!-- Orange arrow marker (for processing) -->
<marker id="arrowhead-orange" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#ed8936"/>
</marker>
</defs>
<!-- ===== DATA SOURCE BOX ===== -->
<!-- Blue box for data input sources -->
<g class="data-source-component">
<rect x="50" y="50" width="250" height="200" rx="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="175" y="85" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Source Name</text>
<text x="175" y="110" text-anchor="middle" fill="white"
font-size="12">Source Type</text>
<!-- Details section -->
<text x="175" y="140" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Details:</text>
<text x="175" y="160" text-anchor="middle" fill="white"
font-size="10">• Field 1</text>
<text x="175" y="175" text-anchor="middle" fill="white"
font-size="10">• Field 2</text>
<text x="175" y="190" text-anchor="middle" fill="white"
font-size="10">• Field 3</text>
</g>
<!-- ===== PROCESSING ENGINE BOX ===== -->
<!-- Orange box for processing/transformation logic -->
<g class="processing-component">
<rect x="450" y="200" width="300" height="150" rx="15"
fill="#ed8936" stroke="#c05621" stroke-width="3"/>
<text x="600" y="235" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Processing Engine</text>
<!-- Processing steps -->
<text x="600" y="260" text-anchor="middle" fill="white"
font-size="11">• Step 1: Description</text>
<text x="600" y="280" text-anchor="middle" fill="white"
font-size="11">• Step 2: Description</text>
<text x="600" y="300" text-anchor="middle" fill="white"
font-size="11">• Step 3: Description</text>
<text x="600" y="320" text-anchor="middle" fill="white"
font-size="11">• Step 4: Description</text>
</g>
<!-- ===== OUTPUT/RESULT BOX ===== -->
<!-- Green box for outputs and results -->
<g class="output-component">
<rect x="900" y="175" width="250" height="200" rx="15"
fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="1025" y="210" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Output Name</text>
<text x="1025" y="235" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Output Details:</text>
<!-- Output details -->
<text x="1025" y="255" text-anchor="middle" fill="white"
font-size="10">• Format: Type</text>
<text x="1025" y="270" text-anchor="middle" fill="white"
font-size="10">• Size: Amount</text>
<text x="1025" y="285" text-anchor="middle" fill="white"
font-size="10">• Destination: Location</text>
<!-- Status indicators -->
<text x="1025" y="310" text-anchor="middle" fill="white"
font-size="10">✓ Status indicator</text>
</g>
<!-- ===== AI/ML SERVICE BOX ===== -->
<!-- Purple box for AI/ML services -->
<g class="ai-service-component">
<rect x="320" y="400" width="250" height="120" rx="15"
fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>
<text x="445" y="435" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">AI Service</text>
<text x="445" y="460" text-anchor="middle" fill="white"
font-size="11">Model/Provider Name</text>
<text x="445" y="480" text-anchor="middle" fill="white"
font-size="10">• Capability 1</text>
<text x="445" y="495" text-anchor="middle" fill="white"
font-size="10">• Capability 2</text>
</g>
<!-- ===== CONFIGURATION BOX ===== -->
<!-- Amber box for configuration and settings -->
<g class="config-component">
<rect x="470" y="60" width="180" height="100" rx="10"
fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="560" y="90" text-anchor="middle" fill="white"
font-size="14" font-weight="bold">Configuration</text>
<text x="560" y="110" text-anchor="middle" fill="white"
font-size="10">Config file</text>
<text x="560" y="125" text-anchor="middle" fill="white"
font-size="10">• Settings</text>
<text x="560" y="140" text-anchor="middle" fill="white"
font-size="10">• Parameters</text>
</g>
<!-- ===== SUPPORTING TOOL BOX ===== -->
<!-- Gray box for supporting tools/utilities -->
<g class="tool-component">
<rect x="750" y="240" width="200" height="70" rx="10"
fill="#718096" stroke="#4a5568" stroke-width="2"/>
<text x="850" y="265" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Tool Name</text>
<text x="850" y="283" text-anchor="middle" fill="white"
font-size="9">Description</text>
<text x="850" y="297" text-anchor="middle" fill="white"
font-size="9">Purpose</text>
</g>
<!-- ===== PIPELINE STAGE BOX ===== -->
<!-- Compact pipeline stage for multi-stage diagrams -->
<g class="pipeline-stage">
<rect x="50" y="50" width="200" height="100" rx="10"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="150" y="80" text-anchor="middle" fill="white"
font-size="14" font-weight="bold">Stage Name</text>
<text x="150" y="100" text-anchor="middle" fill="white"
font-size="10">Operation</text>
<text x="150" y="115" text-anchor="middle" fill="white"
font-size="10">Technology</text>
<text x="150" y="130" text-anchor="middle" fill="white"
font-size="10">Output format</text>
</g>
<!-- ===== LAYERED ARCHITECTURE COMPONENT ===== -->
<!-- Stack of layers for architecture diagrams -->
<g class="architecture-layer">
<!-- Layer 1 -->
<rect x="100" y="100" width="400" height="80" rx="10"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="300" y="145" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 1: Data Sources</text>
<!-- Layer 2 -->
<rect x="100" y="200" width="400" height="80" rx="10"
fill="#ed8936" stroke="#c05621" stroke-width="2"/>
<text x="300" y="245" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 2: Processing</text>
<!-- Layer 3 -->
<rect x="100" y="300" width="400" height="80" rx="10"
fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="300" y="345" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 3: Services</text>
<!-- Layer 4 -->
<rect x="100" y="400" width="400" height="80" rx="10"
fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="300" y="445" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 4: Output</text>
</g>
<!-- ===== CONNECTORS & ARROWS ===== -->
<!-- Simple horizontal arrow -->
<g class="arrow-horizontal">
<path d="M 300 150 L 450 150" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="375" y="140" text-anchor="middle" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- Diagonal arrow (down-right) -->
<g class="arrow-diagonal">
<path d="M 300 150 L 450 250" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="360" y="190" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- Vertical arrow (downward) -->
<g class="arrow-vertical">
<path d="M 150 150 L 150 280" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="160" y="215" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- L-shaped connector (right then down) -->
<g class="connector-l-shape">
<path d="M 300 150 L 450 150 L 450 280" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
</g>
<!-- Dashed line (for optional/uncertain paths) -->
<g class="arrow-dashed">
<path d="M 300 150 L 450 150" stroke="#718096"
stroke-width="2" stroke-dasharray="5,5"
marker-end="url(#arrowhead)"/>
<text x="375" y="140" text-anchor="middle" fill="#718096"
font-size="10" font-style="italic">Optional</text>
</g>
<!-- ===== ANNOTATION/CALLOUT BOX ===== -->
<!-- Info box with border and background -->
<g class="annotation-box">
<rect x="880" y="150" width="220" height="120" rx="10"
fill="#fff5f5" stroke="#fc8181" stroke-width="2"/>
<text x="990" y="180" text-anchor="middle" fill="#742a2a"
font-size="12" font-weight="bold">⚠️ Important Note</text>
<text x="990" y="200" text-anchor="middle" fill="#5a1919"
font-size="9">Line 1 of note text</text>
<text x="990" y="215" text-anchor="middle" fill="#5a1919"
font-size="9">Line 2 of note text</text>
<text x="990" y="230" text-anchor="middle" fill="#5a1919"
font-size="9">Line 3 of note text</text>
<text x="990" y="245" text-anchor="middle" fill="#5a1919"
font-size="9">Line 4 of note text</text>
</g>
<!-- ===== REFERENCE TABLE ROW ===== -->
<!-- Table header row -->
<g class="table-header">
<rect x="50" y="50" width="140" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="120" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 1</text>
<rect x="190" y="50" width="180" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="280" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 2</text>
<rect x="370" y="50" width="140" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="440" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 3</text>
</g>
<!-- Table data row -->
<g class="table-row">
<rect x="50" y="90" width="140" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="120" y="120" text-anchor="middle" fill="#234e52"
font-size="11" font-weight="bold">Data 1</text>
<rect x="190" y="90" width="180" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="280" y="120" text-anchor="middle" fill="#234e52"
font-size="10">Data 2</text>
<rect x="370" y="90" width="140" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="440" y="120" text-anchor="middle" fill="#234e52"
font-size="10">Data 3</text>
</g>
<!-- ===== COLOR PALETTE REFERENCE ===== -->
<!--
Data Sources / Inputs: #4299e1 (blue) stroke: #2b6cb0
Processing / Logic: #ed8936 (orange) stroke: #c05621
AI/ML Services: #9f7aea (purple) stroke: #6b46c1
Output / Success: #48bb78 (green) stroke: #2f855a
Configuration: #f59e0b (amber) stroke: #d97706
Supporting Tools: #718096 (gray) stroke: #4a5568
Warning / Critical: #e53e3e (red) stroke: #c53030
Information / Teal: #38b2ac (teal) stroke: #2c7a7b
Special / Highlight: #805ad5 (purple2) stroke: #6b46c1
Text dark: #2d3748
Text medium: #4a5568
Text light: #718096
Background light: #f7fafc
Border light: #e2e8f0
-->

306
skills/architecture-diagram-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,306 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PROJECT_NAME] Architecture</title>
<style>
/* ===== RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
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: 3rem;
}
/* ===== TYPOGRAPHY ===== */
h1 {
font-size: 2.5rem;
color: #2d3748;
margin-bottom: 0.5rem;
text-align: center;
}
.subtitle {
text-align: center;
color: #718096;
font-size: 1.1rem;
margin-bottom: 2rem;
}
/* ===== SECTIONS ===== */
.section {
margin: 2rem 0;
}
.section-title {
font-size: 1.5rem;
color: #2d3748;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid #667eea;
}
/* ===== METRIC CARDS ===== */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.metric-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
color: white;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.metric-label {
font-size: 0.9rem;
opacity: 0.9;
}
/* ===== FEATURE CARDS ===== */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1rem 0;
}
.feature-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 1.5rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.feature-card h3 {
color: #667eea;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.feature-card ul {
list-style: none;
color: #4a5568;
line-height: 1.8;
}
.feature-card ul li:before {
content: "→ ";
color: #667eea;
font-weight: bold;
}
/* ===== DIAGRAMS ===== */
.diagram-container {
background: #f7fafc;
border-radius: 12px;
padding: 2rem;
margin: 1rem 0;
overflow-x: auto;
}
svg {
width: 100%;
height: auto;
display: block;
}
/* ===== LEGEND ===== */
.legend {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
padding: 1.5rem;
background: #f7fafc;
border-radius: 12px;
justify-content: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid #2d3748;
}
/* ===== FOOTER ===== */
footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #e2e8f0;
text-align: center;
color: #718096;
font-size: 0.9rem;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
body {
padding: 1rem;
}
.container {
padding: 1.5rem;
}
h1 {
font-size: 1.8rem;
}
.metric-grid,
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<h1>[PROJECT_ICON] [PROJECT_NAME]</h1>
<p class="subtitle">[PROJECT_DESCRIPTION]</p>
<!-- KEY METRICS -->
<div class="metric-grid">
<!-- Metric cards will be inserted here -->
</div>
<!-- BUSINESS OBJECTIVES -->
<div class="section">
<h2 class="section-title">📊 Business Objectives & End Users</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- DATA INPUT OVERVIEW -->
<div class="section">
<h2 class="section-title">📥 Data Input Overview</h2>
<div class="diagram-container">
<svg viewBox="0 0 1200 600">
<!-- Data flow diagram will be inserted here -->
</svg>
</div>
</div>
<!-- PROCESSING PIPELINE -->
<div class="section">
<h2 class="section-title">⚙️ Data Processing Pipeline</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 700">
<!-- Pipeline diagram will be inserted here -->
</svg>
</div>
</div>
<!-- FUNCTIONAL FEATURES -->
<div class="section">
<h2 class="section-title">✨ Functional Features</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- NON-FUNCTIONAL FEATURES -->
<div class="section">
<h2 class="section-title">🛡️ Non-Functional Features</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- SYSTEM ARCHITECTURE -->
<div class="section">
<h2 class="section-title">🏗️ System Architecture</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 800">
<!-- Architecture diagram will be inserted here -->
</svg>
</div>
</div>
<!-- DEPLOYMENT & USAGE -->
<div class="section">
<h2 class="section-title">🚀 Deployment & Usage</h2>
<div class="feature-grid">
<!-- Deployment info cards will be inserted here -->
</div>
</div>
<!-- LEGEND -->
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>Data Sources</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #ed8936;"></div>
<span>Processing Logic</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #9f7aea;"></div>
<span>AI Services</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #48bb78;"></div>
<span>Output/Results</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #f59e0b;"></div>
<span>Configuration</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #718096;"></div>
<span>Supporting Tools</span>
</div>
</div>
<!-- FOOTER -->
<footer>
<strong>[PROJECT_NAME] Architecture v[VERSION]</strong><br>
Generated: [DATE] | [SHORT_DESCRIPTION]<br>
Technologies: [TECH_STACK]
</footer>
</div>
</body>
</html>

603
skills/architecture-diagram-creator/references/example_architecture.html Normal file
View File

@@ -0,0 +1,603 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataFlow ETL Pipeline Architecture</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 3rem;
}
h1 {
font-size: 2.5rem;
color: #2d3748;
margin-bottom: 0.5rem;
text-align: center;
}
.subtitle {
text-align: center;
color: #718096;
font-size: 1.1rem;
margin-bottom: 2rem;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.metric-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
color: white;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.metric-label {
font-size: 0.9rem;
opacity: 0.9;
}
.section {
margin: 2rem 0;
}
.section-title {
font-size: 1.5rem;
color: #2d3748;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid #667eea;
}
.diagram-container {
background: #f7fafc;
border-radius: 12px;
padding: 2rem;
margin: 1rem 0;
overflow-x: auto;
}
svg {
width: 100%;
height: auto;
display: block;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
padding: 1.5rem;
background: #f7fafc;
border-radius: 12px;
justify-content: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid #2d3748;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1rem 0;
}
.feature-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 1.5rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.feature-card h3 {
color: #667eea;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.feature-card ul {
list-style: none;
color: #4a5568;
line-height: 1.8;
}
.feature-card ul li:before {
content: "→ ";
color: #667eea;
font-weight: bold;
}
footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #e2e8f0;
text-align: center;
color: #718096;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>🔄 DataFlow ETL Pipeline</h1>
<p class="subtitle">Customer Data Integration & Analytics Platform</p>
<!-- Key Metrics -->
<div class="metric-grid">
<div class="metric-card">
<div class="metric-value">3</div>
<div class="metric-label">Data Sources</div>
</div>
<div class="metric-card">
<div class="metric-value">5</div>
<div class="metric-label">Processing Stages</div>
</div>
<div class="metric-card">
<div class="metric-value">100K</div>
<div class="metric-label">Records/Day</div>
</div>
<div class="metric-card">
<div class="metric-value">99.9%</div>
<div class="metric-label">Uptime SLA</div>
</div>
</div>
<!-- Business Context -->
<div class="section">
<h2 class="section-title">📊 Business Objectives & End Users</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>Primary Objective</h3>
<ul>
<li>Consolidate customer data from multiple sources</li>
<li>Provide unified view for analytics and reporting</li>
<li>Enable real-time data-driven decision making</li>
<li>Ensure data quality and consistency</li>
</ul>
</div>
<div class="feature-card">
<h3>End Users</h3>
<ul>
<li>Business Analysts (data exploration)</li>
<li>Data Scientists (ML model training)</li>
<li>Marketing Team (campaign targeting)</li>
<li>Customer Success (account insights)</li>
<li>Executive Dashboard (KPI monitoring)</li>
</ul>
</div>
<div class="feature-card">
<h3>Business Value</h3>
<ul>
<li>Reduce manual data reconciliation (80% time savings)</li>
<li>Improve data accuracy and completeness</li>
<li>Enable faster business insights</li>
<li>Scale data processing capacity</li>
</ul>
</div>
</div>
</div>
<!-- Data Input Overview -->
<div class="section">
<h2 class="section-title">📥 Data Input Overview</h2>
<div class="diagram-container">
<svg viewBox="0 0 1200 500">
<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>
<marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
</marker>
</defs>
<!-- Source 1: CRM API -->
<rect x="50" y="50" width="220" height="150" rx="15" fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="160" y="85" text-anchor="middle" fill="white" font-size="16" font-weight="bold">Source 1: CRM API</text>
<text x="160" y="110" text-anchor="middle" fill="white" font-size="12">(Salesforce)</text>
<text x="160" y="135" text-anchor="middle" fill="white" font-size="10">Format: JSON REST API</text>
<text x="160" y="150" text-anchor="middle" fill="white" font-size="10">~50K records/day</text>
<text x="160" y="165" text-anchor="middle" fill="white" font-size="10">Customer profiles</text>
<text x="160" y="180" text-anchor="middle" fill="white" font-size="10">Real-time sync</text>
<!-- Source 2: Database -->
<rect x="50" y="220" width="220" height="150" rx="15" fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>
<text x="160" y="255" text-anchor="middle" fill="white" font-size="16" font-weight="bold">Source 2: Orders DB</text>
<text x="160" y="280" text-anchor="middle" fill="white" font-size="12">(MySQL)</text>
<text x="160" y="305" text-anchor="middle" fill="white" font-size="10">Format: SQL queries</text>
<text x="160" y="320" text-anchor="middle" fill="white" font-size="10">~30K orders/day</text>
<text x="160" y="335" text-anchor="middle" fill="white" font-size="10">Transaction data</text>
<text x="160" y="350" text-anchor="middle" fill="white" font-size="10">Hourly batch</text>
<!-- Source 3: CSV Files -->
<rect x="50" y="390" width="220" height="80" rx="15" fill="#ed8936" stroke="#c05621" stroke-width="3"/>
<text x="160" y="420" text-anchor="middle" fill="white" font-size="16" font-weight="bold">Source 3: CSV Export</text>
<text x="160" y="440" text-anchor="middle" fill="white" font-size="10">~20K records/day</text>
<text x="160" y="455" text-anchor="middle" fill="white" font-size="10">Support tickets (S3)</text>
<!-- ETL Pipeline -->
<rect x="400" y="175" width="280" height="150" rx="15" fill="#ed8936" stroke="#c05621" stroke-width="3"/>
<text x="540" y="210" text-anchor="middle" fill="white" font-size="16" font-weight="bold">ETL Pipeline</text>
<text x="540" y="235" text-anchor="middle" fill="white" font-size="11">AWS Lambda + Airflow</text>
<text x="540" y="260" text-anchor="middle" fill="white" font-size="10">• Data validation</text>
<text x="540" y="278" text-anchor="middle" fill="white" font-size="10">• Schema transformation</text>
<text x="540" y="296" text-anchor="middle" fill="white" font-size="10">• Deduplication</text>
<text x="540" y="314" text-anchor="middle" fill="white" font-size="10">• Enrichment</text>
<!-- Data Warehouse -->
<rect x="820" y="150" width="300" height="200" rx="15" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="970" y="190" text-anchor="middle" fill="white" font-size="16" font-weight="bold">Data Warehouse</text>
<text x="970" y="215" text-anchor="middle" fill="white" font-size="12">(BigQuery)</text>
<text x="970" y="245" text-anchor="middle" fill="white" font-size="10">Unified customer view</text>
<text x="970" y="263" text-anchor="middle" fill="white" font-size="10">360° analytics</text>
<text x="970" y="281" text-anchor="middle" fill="white" font-size="10">Historical trends</text>
<text x="970" y="299" text-anchor="middle" fill="white" font-size="10">ML-ready datasets</text>
<text x="970" y="325" text-anchor="middle" fill="white" font-size="10">✓ GDPR compliant</text>
<!-- Arrows -->
<path d="M 270 125 L 400 225" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<path d="M 270 295 L 400 275" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<path d="M 270 430 L 400 300" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<path d="M 680 250 L 820 250" stroke="#48bb78" stroke-width="3" marker-end="url(#arrowhead-green)"/>
<!-- Labels -->
<text x="330" y="165" fill="#2d3748" font-size="10" font-weight="bold">Customer data</text>
<text x="330" y="285" fill="#2d3748" font-size="10" font-weight="bold">Order data</text>
<text x="330" y="370" fill="#2d3748" font-size="10" font-weight="bold">Support data</text>
<text x="740" y="240" fill="#48bb78" font-size="11" font-weight="bold">Processed</text>
</svg>
</div>
</div>
<!-- Processing Pipeline -->
<div class="section">
<h2 class="section-title">⚙️ Data Processing Pipeline</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 600">
<defs>
<marker id="arrow-pipeline" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
</marker>
</defs>
<!-- Stage 1 -->
<rect x="50" y="50" width="200" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="150" y="80" text-anchor="middle" fill="white" font-size="14" font-weight="bold">1. Data Ingestion</text>
<text x="150" y="100" text-anchor="middle" fill="white" font-size="10">Pull from sources</text>
<text x="150" y="115" text-anchor="middle" fill="white" font-size="10">API + SQL + S3</text>
<text x="150" y="130" text-anchor="middle" fill="white" font-size="10">Raw data storage</text>
<!-- Stage 2 -->
<rect x="50" y="180" width="200" height="100" rx="10" fill="#ed8936" stroke="#c05621" stroke-width="2"/>
<text x="150" y="210" text-anchor="middle" fill="white" font-size="14" font-weight="bold">2. Validation</text>
<text x="150" y="230" text-anchor="middle" fill="white" font-size="10">Schema checks</text>
<text x="150" y="245" text-anchor="middle" fill="white" font-size="10">Data quality rules</text>
<text x="150" y="260" text-anchor="middle" fill="white" font-size="10">Error logging</text>
<!-- Stage 3 -->
<rect x="50" y="310" width="200" height="100" rx="10" fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="150" y="340" text-anchor="middle" fill="white" font-size="14" font-weight="bold">3. Transformation</text>
<text x="150" y="360" text-anchor="middle" fill="white" font-size="10">Normalize formats</text>
<text x="150" y="375" text-anchor="middle" fill="white" font-size="10">Map fields</text>
<text x="150" y="390" text-anchor="middle" fill="white" font-size="10">Type conversions</text>
<!-- Stage 4 -->
<rect x="320" y="50" width="200" height="120" rx="10" fill="#38b2ac" stroke="#2c7a7b" stroke-width="2"/>
<text x="420" y="80" text-anchor="middle" fill="white" font-size="14" font-weight="bold">4. Deduplication</text>
<text x="420" y="100" text-anchor="middle" fill="white" font-size="10">Fuzzy matching</text>
<text x="420" y="115" text-anchor="middle" fill="white" font-size="10">Customer ID merge</text>
<text x="420" y="130" text-anchor="middle" fill="white" font-size="10">Conflict resolution</text>
<text x="420" y="145" text-anchor="middle" fill="white" font-size="10">Master record creation</text>
<!-- Stage 5 -->
<rect x="320" y="200" width="200" height="100" rx="10" fill="#805ad5" stroke="#6b46c1" stroke-width="2"/>
<text x="420" y="230" text-anchor="middle" fill="white" font-size="14" font-weight="bold">5. Enrichment</text>
<text x="420" y="250" text-anchor="middle" fill="white" font-size="10">Geo-location lookup</text>
<text x="420" y="265" text-anchor="middle" fill="white" font-size="10">Industry tagging</text>
<text x="420" y="280" text-anchor="middle" fill="white" font-size="10">Score calculations</text>
<!-- Stage 6 -->
<rect x="590" y="100" width="200" height="120" rx="10" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="690" y="130" text-anchor="middle" fill="white" font-size="14" font-weight="bold">6. Load</text>
<text x="690" y="150" text-anchor="middle" fill="white" font-size="10">Write to warehouse</text>
<text x="690" y="165" text-anchor="middle" fill="white" font-size="10">Update indexes</text>
<text x="690" y="180" text-anchor="middle" fill="white" font-size="10">Trigger downstream</text>
<text x="690" y="195" text-anchor="middle" fill="white" font-size="10">✓ Complete</text>
<!-- Arrows -->
<path d="M 150 150 L 150 180" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-pipeline)"/>
<path d="M 150 280 L 150 310" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-pipeline)"/>
<path d="M 250 100 L 320 110" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-pipeline)"/>
<path d="M 420 170 L 420 200" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-pipeline)"/>
<path d="M 520 250 L 590 180" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-pipeline)"/>
<!-- Configuration note -->
<rect x="900" y="100" width="400" height="180" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
<text x="1100" y="135" text-anchor="middle" fill="#2d3748" font-size="13" font-weight="bold">Pipeline Configuration</text>
<text x="930" y="165" fill="#4a5568" font-size="10" font-weight="bold">Orchestration:</text>
<text x="930" y="180" fill="#4a5568" font-size="9">• Apache Airflow (DAG scheduling)</text>
<text x="930" y="195" fill="#4a5568" font-size="9">• AWS Lambda (serverless compute)</text>
<text x="930" y="210" fill="#4a5568" font-size="9">• S3 (intermediate storage)</text>
<text x="930" y="230" fill="#4a5568" font-size="9" font-weight="bold">Monitoring:</text>
<text x="930" y="245" fill="#4a5568" font-size="9">• CloudWatch logs & metrics</text>
<text x="930" y="260" fill="#4a5568" font-size="9">• PagerDuty alerts</text>
</svg>
</div>
</div>
<!-- Functional Features -->
<div class="section">
<h2 class="section-title">✨ Functional Features</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>Data Validation</h3>
<ul>
<li>JSON schema validation for API data</li>
<li>SQL constraint checks for database records</li>
<li>Custom business rule engine</li>
<li>Automated error notifications</li>
</ul>
</div>
<div class="feature-card">
<h3>Intelligent Deduplication</h3>
<ul>
<li>Fuzzy string matching (Levenshtein distance)</li>
<li>Multi-field entity resolution</li>
<li>Confidence scoring for matches</li>
<li>Manual review queue for uncertain cases</li>
</ul>
</div>
<div class="feature-card">
<h3>Data Enrichment</h3>
<ul>
<li>Geo-location from IP/address</li>
<li>Company firmographic data</li>
<li>Industry classification</li>
<li>Customer lifecycle scoring</li>
</ul>
</div>
</div>
</div>
<!-- Non-Functional Features -->
<div class="section">
<h2 class="section-title">🛡️ Non-Functional Features</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>Performance</h3>
<ul>
<li>Processes 100K records in &lt;30 minutes</li>
<li>Parallel processing across 10 Lambda workers</li>
<li>Optimized SQL queries with indexes</li>
<li>Incremental data loading strategy</li>
</ul>
</div>
<div class="feature-card">
<h3>Reliability</h3>
<ul>
<li>99.9% uptime SLA</li>
<li>Automatic retry with exponential backoff</li>
<li>Dead-letter queue for failed records</li>
<li>Point-in-time recovery capability</li>
</ul>
</div>
<div class="feature-card">
<h3>Security & Compliance</h3>
<ul>
<li>End-to-end encryption (TLS 1.3)</li>
<li>GDPR-compliant data handling</li>
<li>Role-based access control (RBAC)</li>
<li>Audit logging of all data access</li>
</ul>
</div>
</div>
</div>
<!-- System Architecture -->
<div class="section">
<h2 class="section-title">🏗️ System Architecture</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 700">
<defs>
<marker id="arrow-arch" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
</marker>
</defs>
<!-- Layer 1: Data Sources -->
<text x="50" y="40" fill="#2d3748" font-size="16" font-weight="bold">Layer 1: Data Sources</text>
<rect x="50" y="60" width="180" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="140" y="95" text-anchor="middle" fill="white" font-size="12" font-weight="bold">CRM API</text>
<text x="140" y="115" text-anchor="middle" fill="white" font-size="10">Salesforce REST</text>
<text x="140" y="130" text-anchor="middle" fill="white" font-size="10">OAuth 2.0</text>
<rect x="260" y="60" width="180" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="350" y="95" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Orders DB</text>
<text x="350" y="115" text-anchor="middle" fill="white" font-size="10">MySQL 8.0</text>
<text x="350" y="130" text-anchor="middle" fill="white" font-size="10">Read replica</text>
<rect x="470" y="60" width="180" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="560" y="95" text-anchor="middle" fill="white" font-size="12" font-weight="bold">CSV Files</text>
<text x="560" y="115" text-anchor="middle" fill="white" font-size="10">S3 Bucket</text>
<text x="560" y="130" text-anchor="middle" fill="white" font-size="10">Daily exports</text>
<!-- Layer 2: Processing -->
<text x="50" y="220" fill="#2d3748" font-size="16" font-weight="bold">Layer 2: Processing</text>
<rect x="50" y="240" width="250" height="100" rx="10" fill="#ed8936" stroke="#c05621" stroke-width="2"/>
<text x="175" y="275" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Airflow DAGs</text>
<text x="175" y="295" text-anchor="middle" fill="white" font-size="10">Python 3.11</text>
<text x="175" y="310" text-anchor="middle" fill="white" font-size="10">Orchestration & scheduling</text>
<rect x="330" y="240" width="250" height="100" rx="10" fill="#ed8936" stroke="#c05621" stroke-width="2"/>
<text x="455" y="275" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Lambda Functions</text>
<text x="455" y="295" text-anchor="middle" fill="white" font-size="10">Node.js 20</text>
<text x="455" y="310" text-anchor="middle" fill="white" font-size="10">Data transformations</text>
<!-- Layer 3: External Services -->
<text x="50" y="400" fill="#2d3748" font-size="16" font-weight="bold">Layer 3: External Services</text>
<rect x="50" y="420" width="220" height="100" rx="10" fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="160" y="455" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Geo API</text>
<text x="160" y="475" text-anchor="middle" fill="white" font-size="10">Location enrichment</text>
<text x="160" y="490" text-anchor="middle" fill="white" font-size="10">MaxMind GeoIP2</text>
<rect x="300" y="420" width="220" height="100" rx="10" fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="410" y="455" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Clearbit</text>
<text x="410" y="475" text-anchor="middle" fill="white" font-size="10">Company data</text>
<text x="410" y="490" text-anchor="middle" fill="white" font-size="10">Firmographics API</text>
<!-- Layer 4: Storage -->
<text x="50" y="580" fill="#2d3748" font-size="16" font-weight="bold">Layer 4: Output & Storage</text>
<rect x="50" y="600" width="250" height="80" rx="10" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="175" y="635" text-anchor="middle" fill="white" font-size="12" font-weight="bold">BigQuery</text>
<text x="175" y="655" text-anchor="middle" fill="white" font-size="10">Data warehouse</text>
<rect x="330" y="600" width="250" height="80" rx="10" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="455" y="635" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Redis Cache</text>
<text x="455" y="655" text-anchor="middle" fill="white" font-size="10">Query acceleration</text>
<!-- Arrows -->
<path d="M 140 160 L 175 240" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-arch)"/>
<path d="M 350 160 L 300 240" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-arch)"/>
<path d="M 175 340 L 160 420" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-arch)"/>
<path d="M 175 340 L 175 600" stroke="#2d3748" stroke-width="2" marker-end="url(#arrow-arch)"/>
<!-- Supporting info -->
<rect x="750" y="240" width="600" height="260" rx="15" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
<text x="1050" y="275" text-anchor="middle" fill="#2d3748" font-size="14" font-weight="bold">Technology Stack</text>
<text x="780" y="310" fill="#2d3748" font-size="11" font-weight="bold">Languages & Frameworks:</text>
<text x="780" y="330" fill="#4a5568" font-size="10">• Python 3.11 (data processing)</text>
<text x="780" y="345" fill="#4a5568" font-size="10">• Node.js 20 (Lambda functions)</text>
<text x="780" y="360" fill="#4a5568" font-size="10">• SQL (data queries)</text>
<text x="780" y="390" fill="#2d3748" font-size="11" font-weight="bold">AWS Services:</text>
<text x="780" y="410" fill="#4a5568" font-size="10">• Lambda (serverless compute)</text>
<text x="780" y="425" fill="#4a5568" font-size="10">• S3 (object storage)</text>
<text x="780" y="440" fill="#4a5568" font-size="10">• CloudWatch (monitoring)</text>
<text x="780" y="455" fill="#4a5568" font-size="10">• IAM (access control)</text>
<text x="780" y="480" fill="#2d3748" font-size="11" font-weight="bold">Dependencies:</text>
<text x="780" y="500" fill="#4a5568" font-size="10">• pandas, SQLAlchemy (Python)</text>
</svg>
</div>
</div>
<!-- Deployment -->
<div class="section">
<h2 class="section-title">🚀 Deployment & Usage</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>Deployment Model</h3>
<ul>
<li>Cloud-hosted (AWS)</li>
<li>Serverless architecture</li>
<li>Multi-region for redundancy</li>
<li>Infrastructure as Code (Terraform)</li>
</ul>
</div>
<div class="feature-card">
<h3>Prerequisites</h3>
<ul>
<li>AWS account with appropriate IAM roles</li>
<li>Salesforce API credentials</li>
<li>MySQL read replica access</li>
<li>BigQuery project setup</li>
</ul>
</div>
<div class="feature-card">
<h3>Typical Workflow</h3>
<ul>
<li>1. Configure data source connections</li>
<li>2. Deploy Airflow DAGs</li>
<li>3. Run initial backfill</li>
<li>4. Monitor daily incremental runs</li>
<li>5. Query unified data in BigQuery</li>
</ul>
</div>
</div>
</div>
<!-- Legend -->
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>Data Sources</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #ed8936;"></div>
<span>Processing Logic</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #9f7aea;"></div>
<span>External Services</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #48bb78;"></div>
<span>Output/Storage</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #38b2ac;"></div>
<span>Data Quality</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #805ad5;"></div>
<span>Enrichment</span>
</div>
</div>
<footer>
<strong>DataFlow ETL Pipeline Architecture v1.0</strong><br>
Generated: 2025-11-03 | Customer Data Integration Platform<br>
Technologies: Python, Node.js, AWS Lambda, Apache Airflow, BigQuery, MySQL
</footer>
</div>
</body>
</html>

78
skills/dashboard-creator/SKILL.md Normal file
View File

@@ -0,0 +1,78 @@
---
name: dashboard-creator
description: Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
---
# Dashboard Creator
Create interactive HTML dashboards with KPI cards and charts.
## When to Use
- "Create dashboard for [metrics]"
- "Show KPI visualization"
- "Generate performance dashboard"
- "Make analytics dashboard with charts"
## Components
1. **KPI Cards**: metric name, value, change %, trend icon
2. **Charts**: bar/pie/line using SVG or CSS
3. **Progress Bars**: completion indicators
4. **Data Tables**: tabular data display
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>[Project] Dashboard</title>
<style>
body { font-family: system-ui; background: #f7fafc; }
.kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kpi-value { font-size: 36px; font-weight: bold; }
.trend-up { color: #48bb78; }
.trend-down { color: #e53e3e; }
</style>
</head>
<body>
<h1>[Dashboard Name]</h1>
<div class="grid">
<!-- KPI cards -->
<!-- Charts -->
<!-- Progress bars -->
</div>
</body>
</html>
```
## KPI Card Pattern
```html
<div class="kpi-card">
<div class="kpi-label">Revenue</div>
<div class="kpi-value">$124K</div>
<div class="trend-up">↑ 12.5%</div>
</div>
```
## Chart Pattern (SVG Bar Chart)
```html
<svg viewBox="0 0 400 300">
<rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
<rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
<!-- bars for each data point -->
</svg>
```
## Workflow
1. Extract metrics and data
2. Create KPI cards grid
3. Generate charts (bar/pie/line) as SVG
4. Add progress indicators
5. Write to `[name]-dashboard.html`
Use semantic colors: green (positive), red (negative), blue (neutral).

305
skills/dashboard-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,305 @@
<!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>

324
skills/dashboard-creator/assets/templates/dashboard_components.html Normal file
View File

@@ -0,0 +1,324 @@
<!-- DASHBOARD COMPONENTS LIBRARY -->
<!-- Copy and customize these patterns for metric dashboards and data visualizations -->
<!-- ===== METRIC CARDS ===== -->
<!-- Standard metric card (gradient background) -->
<div class="metric-card">
<div class="metric-value">1,234</div>
<div class="metric-label">Total Items</div>
</div>
<!-- Metric card with subtitle -->
<div class="metric-card">
<div class="metric-value">89%</div>
<div class="metric-label">Completion Rate<br><small>Last 30 days</small></div>
</div>
<!-- Metric card with custom colors -->
<div class="metric-card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);">
<div class="metric-value">✓ 456</div>
<div class="metric-label">Completed Tasks</div>
</div>
<div class="metric-card" style="background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);">
<div class="metric-value">⚠ 23</div>
<div class="metric-label">Critical Issues</div>
</div>
<!-- ===== BAR CHARTS (SVG) ===== -->
<svg viewBox="0 0 1200 400" style="width: 100%; height: auto;">
<!-- Chart title -->
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Distribution by Category
</text>
<!-- Axes -->
<line x1="100" y1="350" x2="1100" y2="350" stroke="#2d3748" stroke-width="2"/>
<line x1="100" y1="350" x2="100" y2="80" stroke="#2d3748" stroke-width="2"/>
<!-- Y-axis labels -->
<text x="80" y="355" text-anchor="end" font-size="12" fill="#718096">0</text>
<text x="80" y="280" text-anchor="end" font-size="12" fill="#718096">200</text>
<text x="80" y="205" text-anchor="end" font-size="12" fill="#718096">400</text>
<text x="80" y="130" text-anchor="end" font-size="12" fill="#718096">600</text>
<text x="80" y="85" text-anchor="end" font-size="12" fill="#718096">800</text>
<!-- Grid lines (optional) -->
<line x1="100" y1="280" x2="1100" y2="280" stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>
<line x1="100" y1="205" x2="1100" y2="205" stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>
<line x1="100" y1="130" x2="1100" y2="130" stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>
<!-- Bar 1 -->
<rect x="200" y="120" width="200" height="230" rx="5"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="300" y="250" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
645
</text>
<text x="300" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
Category A
</text>
<!-- Bar 2 -->
<rect x="500" y="180" width="200" height="170" rx="5"
fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="600" y="270" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
428
</text>
<text x="600" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
Category B
</text>
<!-- Bar 3 -->
<rect x="800" y="260" width="200" height="90" rx="5"
fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="900" y="310" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
167
</text>
<text x="900" y="380" text-anchor="middle" font-size="14" fill="#2d3748">
Category C
</text>
</svg>
<!-- ===== HORIZONTAL BAR CHART ===== -->
<svg viewBox="0 0 1200 500" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Progress by Module
</text>
<!-- Module 1 -->
<text x="50" y="100" font-size="14" fill="#2d3748" font-weight="500">
Module A
</text>
<rect x="150" y="80" width="800" height="40" rx="20" fill="#e2e8f0"/>
<rect x="150" y="80" width="640" height="40" rx="20" fill="#48bb78"/>
<text x="970" y="105" font-size="14" fill="#2d3748" font-weight="bold">
80%
</text>
<!-- Module 2 -->
<text x="50" y="180" font-size="14" fill="#2d3748" font-weight="500">
Module B
</text>
<rect x="150" y="160" width="800" height="40" rx="20" fill="#e2e8f0"/>
<rect x="150" y="160" width="560" height="40" rx="20" fill="#4299e1"/>
<text x="970" y="185" font-size="14" fill="#2d3748" font-weight="bold">
70%
</text>
<!-- Module 3 -->
<text x="50" y="260" font-size="14" fill="#2d3748" font-weight="500">
Module C
</text>
<rect x="150" y="240" width="800" height="40" rx="20" fill="#e2e8f0"/>
<rect x="150" y="240" width="360" height="40" rx="20" fill="#f59e0b"/>
<text x="970" y="265" font-size="14" fill="#2d3748" font-weight="bold">
45%
</text>
<!-- Module 4 -->
<text x="50" y="340" font-size="14" fill="#2d3748" font-weight="500">
Module D
</text>
<rect x="150" y="320" width="800" height="40" rx="20" fill="#e2e8f0"/>
<rect x="150" y="320" width="200" height="40" rx="20" fill="#f56565"/>
<text x="970" y="345" font-size="14" fill="#2d3748" font-weight="bold">
25%
</text>
<!-- Legend -->
<text x="200" y="420" font-size="12" fill="#718096">
0%
</text>
<text x="550" y="420" font-size="12" fill="#718096">
50%
</text>
<text x="920" y="420" font-size="12" fill="#718096">
100%
</text>
</svg>
<!-- ===== PIE/DONUT CHART ===== -->
<svg viewBox="0 0 600 600" style="width: 100%; height: auto;">
<text x="300" y="40" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Task Distribution
</text>
<!-- Donut chart segments (simplified - use proper arc paths for real charts) -->
<circle cx="300" cy="320" r="150" fill="none" stroke="#4299e1" stroke-width="80"
stroke-dasharray="471 0" transform="rotate(-90 300 320)"/>
<circle cx="300" cy="320" r="150" fill="none" stroke="#48bb78" stroke-width="80"
stroke-dasharray="235 236" stroke-dashoffset="0" transform="rotate(-90 300 320)"/>
<circle cx="300" cy="320" r="150" fill="none" stroke="#f59e0b" stroke-width="80"
stroke-dasharray="118 353" stroke-dashoffset="-235" transform="rotate(-90 300 320)"/>
<circle cx="300" cy="320" r="150" fill="none" stroke="#f56565" stroke-width="80"
stroke-dasharray="71 400" stroke-dashoffset="-353" transform="rotate(-90 300 320)"/>
<!-- Center text -->
<text x="300" y="310" text-anchor="middle" font-size="48" font-weight="bold" fill="#2d3748">
1,240
</text>
<text x="300" y="340" text-anchor="middle" font-size="16" fill="#718096">
Total Tasks
</text>
<!-- Legend -->
<g transform="translate(450, 200)">
<circle cx="0" cy="0" r="8" fill="#4299e1"/>
<text x="15" y="5" font-size="14" fill="#2d3748">Complete (50%)</text>
</g>
<g transform="translate(450, 240)">
<circle cx="0" cy="0" r="8" fill="#48bb78"/>
<text x="15" y="5" font-size="14" fill="#2d3748">In Progress (25%)</text>
</g>
<g transform="translate(450, 280)">
<circle cx="0" cy="0" r="8" fill="#f59e0b"/>
<text x="15" y="5" font-size="14" fill="#2d3748">Pending (15%)</text>
</g>
<g transform="translate(450, 320)">
<circle cx="0" cy="0" r="8" fill="#f56565"/>
<text x="15" y="5" font-size="14" fill="#2d3748">Blocked (10%)</text>
</g>
</svg>
<!-- ===== LINE CHART / TREND ===== -->
<svg viewBox="0 0 1200 400" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Performance Trend
</text>
<!-- Axes -->
<line x1="100" y1="350" x2="1100" y2="350" stroke="#2d3748" stroke-width="2"/>
<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"/>
<line x1="100" y1="210" x2="1100" y2="210" stroke="#e2e8f0" stroke-width="1"/>
<line x1="100" y1="140" x2="1100" y2="140" stroke="#e2e8f0" stroke-width="1"/>
<!-- Y-axis labels -->
<text x="80" y="355" text-anchor="end" font-size="12" fill="#718096">0</text>
<text x="80" y="285" text-anchor="end" font-size="12" fill="#718096">25</text>
<text x="80" y="215" text-anchor="end" font-size="12" fill="#718096">50</text>
<text x="80" y="145" text-anchor="end" font-size="12" fill="#718096">75</text>
<text x="80" y="85" text-anchor="end" font-size="12" fill="#718096">100</text>
<!-- X-axis labels -->
<text x="200" y="375" text-anchor="middle" font-size="12" fill="#718096">Jan</text>
<text x="350" y="375" text-anchor="middle" font-size="12" fill="#718096">Feb</text>
<text x="500" y="375" text-anchor="middle" font-size="12" fill="#718096">Mar</text>
<text x="650" y="375" text-anchor="middle" font-size="12" fill="#718096">Apr</text>
<text x="800" y="375" text-anchor="middle" font-size="12" fill="#718096">May</text>
<text x="950" y="375" text-anchor="middle" font-size="12" fill="#718096">Jun</text>
<!-- Area under line (gradient fill) -->
<defs>
<linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4299e1;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#4299e1;stop-opacity:0.05" />
</linearGradient>
</defs>
<path d="M 200 280 L 350 230 L 500 200 L 650 160 L 800 140 L 950 120 L 950 350 L 200 350 Z"
fill="url(#areaGradient)"/>
<!-- Line -->
<path d="M 200 280 L 350 230 L 500 200 L 650 160 L 800 140 L 950 120"
stroke="#4299e1" stroke-width="3" fill="none"/>
<!-- Data points -->
<circle cx="200" cy="280" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<circle cx="350" cy="230" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<circle cx="500" cy="200" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<circle cx="650" cy="160" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<circle cx="800" cy="140" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<circle cx="950" cy="120" r="6" fill="#4299e1" stroke="white" stroke-width="2"/>
<!-- Value labels on data points -->
<text x="200" y="268" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">45</text>
<text x="350" y="218" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">58</text>
<text x="500" y="188" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">67</text>
<text x="650" y="148" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">78</text>
<text x="800" y="128" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">84</text>
<text x="950" y="108" text-anchor="middle" font-size="11" fill="#2d3748" font-weight="bold">92</text>
</svg>
<!-- ===== GAUGE / RADIAL PROGRESS ===== -->
<svg viewBox="0 0 400 300" style="width: 100%; height: auto;">
<text x="200" y="30" text-anchor="middle" font-size="18" font-weight="bold" fill="#2d3748">
System Health
</text>
<!-- Background arc -->
<path d="M 100 200 A 100 100 0 0 1 300 200"
stroke="#e2e8f0" stroke-width="30" fill="none" stroke-linecap="round"/>
<!-- Progress arc (75% = 270 degrees) -->
<path d="M 100 200 A 100 100 0 1 1 271 129"
stroke="#48bb78" stroke-width="30" fill="none" stroke-linecap="round"/>
<!-- Center text -->
<text x="200" y="190" text-anchor="middle" font-size="48" font-weight="bold" fill="#2d3748">
75%
</text>
<text x="200" y="215" text-anchor="middle" font-size="14" fill="#718096">
Excellent
</text>
</svg>
<!-- ===== STATUS INDICATORS ===== -->
<!-- Traffic light style -->
<div style="display: flex; gap: 30px; justify-content: center; align-items: center; padding: 20px;">
<div style="text-align: center;">
<div style="width: 60px; height: 60px; border-radius: 50%; background: #48bb78; margin: 0 auto 10px;"></div>
<div style="font-size: 14px; color: #2d3748;">Good<br><strong>89%</strong></div>
</div>
<div style="text-align: center;">
<div style="width: 60px; height: 60px; border-radius: 50%; background: #f59e0b; margin: 0 auto 10px;"></div>
<div style="font-size: 14px; color: #2d3748;">Warning<br><strong>8%</strong></div>
</div>
<div style="text-align: center;">
<div style="width: 60px; height: 60px; border-radius: 50%; background: #f56565; margin: 0 auto 10px;"></div>
<div style="font-size: 14px; color: #2d3748;">Critical<br><strong>3%</strong></div>
</div>
</div>
<!-- ===== COMPARISON TABLE ===== -->
<div style="background: #f7fafc; padding: 20px; border-radius: 10px; margin: 20px 0;">
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="border-bottom: 2px solid #667eea;">
<th style="padding: 15px; text-align: left; color: #2d3748; font-size: 14px;">Metric</th>
<th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Current</th>
<th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Target</th>
<th style="padding: 15px; text-align: center; color: #2d3748; font-size: 14px;">Status</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e2e8f0;">
<td style="padding: 15px; color: #4a5568;">Response Time</td>
<td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">245ms</td>
<td style="padding: 15px; text-align: center; color: #718096;">< 300ms</td>
<td style="padding: 15px; text-align: center;"><span style="color: #48bb78; font-weight: bold;">✓ On Track</span></td>
</tr>
<tr style="border-bottom: 1px solid #e2e8f0;">
<td style="padding: 15px; color: #4a5568;">Uptime</td>
<td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">99.8%</td>
<td style="padding: 15px; text-align: center; color: #718096;">99.9%</td>
<td style="padding: 15px; text-align: center;"><span style="color: #f59e0b; font-weight: bold;">⚠ Below Target</span></td>
</tr>
<tr>
<td style="padding: 15px; color: #4a5568;">Error Rate</td>
<td style="padding: 15px; text-align: center; font-weight: bold; color: #2d3748;">0.02%</td>
<td style="padding: 15px; text-align: center; color: #718096;">< 0.1%</td>
<td style="padding: 15px; text-align: center;"><span style="color: #48bb78; font-weight: bold;">✓ Exceeding</span></td>
</tr>
</tbody>
</table>
</div>

541
skills/dashboard-creator/references/design_patterns.md Normal file
View File

@@ -0,0 +1,541 @@
# Design Patterns Reference
Complete design system guidelines for creating visually stunning HTML documentation.
## Color System
### Primary Palette
**Gradient Background:**
```css
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):**
```css
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):**
```css
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):**
```css
h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
```
**Code Highlighting:**
```css
.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:**
```css
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:**
```css
display: flex;
justify-content: center;
align-items: center;
```
**Space Between:**
```css
display: flex;
justify-content: space-between;
align-items: center;
```
**Wrapped Row:**
```css
display: flex;
flex-wrap: wrap;
gap: 20px;
```
## Visual Effects
### Shadows
**Card Shadow:**
```css
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
```
- Use for: Main container, elevated cards
**Metric Card Shadow:**
```css
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
```
- Use for: Metric cards, smaller elevation
**Subtle Shadow:**
```css
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:**
```css
/* 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):**
```css
@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:**
```html
<div class="metric-card">
<div class="metric-value">[LARGE NUMBER]</div>
<div class="metric-label">[DESCRIPTION]</div>
</div>
```
**With Custom Color:**
```html
<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:**
```html
<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
Indented content
</div>
```
**CSS:**
```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:**
```html
<div class="example-box">
<div class="example-title">[TITLE]</div>
<p>[CONTENT]</p>
</div>
```
**CSS:**
```css
.example-box {
background: #fff;
border: 2px solid #667eea;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
```
### Legends
**Pattern:**
```html
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>[DESCRIPTION]</span>
</div>
<!-- More items -->
</div>
```
**CSS:**
```css
.legend {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background: #edf2f7;
border-radius: 10px;
}
```
## SVG Styling
### Default SVG Styles
**Container:**
```css
svg {
width: 100%;
height: auto;
}
```
**Text:**
```css
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):**
```html
<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:**
```css
.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:**
```css
@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.

733
skills/dashboard-creator/references/svg_library.md Normal file
View File

@@ -0,0 +1,733 @@
# SVG Component Library
Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.
## SVG Fundamentals
### Basic Structure
```xml
<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:**
```xml
<!-- 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:**
```xml
<rect x="100" y="100" width="200" height="100"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
**Rounded Rectangle:**
```xml
<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:**
```xml
<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:**
```xml
<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):**
```xml
<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:**
```xml
<circle cx="300" cy="200" r="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
### Ellipse
```xml
<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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<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:**
```xml
<path d="M 500 100 L 600 200 L 400 200 Z"
fill="#f56565" stroke="#c53030" stroke-width="3"/>
```
**Pentagon:**
```xml
<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:**
```xml
<line x1="100" y1="200" x2="300" y2="200"
stroke="#2d3748" stroke-width="3"/>
```
**Vertical:**
```xml
<line x1="200" y1="100" x2="200" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Diagonal:**
```xml
<line x1="100" y1="100" x2="300" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Dashed Line:**
```xml
<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:**
```xml
<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:**
```xml
<path d="M 250 100 L 400 100 L 400 200"
stroke="#2d3748" stroke-width="3" fill="none"/>
```
**Multi-segment:**
```xml
<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:**
```xml
<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:**
```xml
<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:**
```xml
<!-- 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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<text x="100" y="100" font-size="16" fill="#2d3748">
Simple Text
</text>
```
### Text Anchoring
**Horizontal Alignment:**
```xml
<!-- 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:**
```xml
<!-- 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
```xml
<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:**
```xml
<text x="100" y="100" font-family="'Segoe UI', sans-serif">
Custom Font
</text>
```
### Multi-line Text
**Using Multiple <text> Elements:**
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<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>)
```xml
<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:**
```xml
<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:**
```xml
<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
```xml
<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)
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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)
```xml
<circle cx="300" cy="300" r="150" fill="none"
stroke="#4299e1" stroke-width="80"/>
```
**Multi-segment Donut:**
```xml
<!-- 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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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
```xml
<circle cx="300" cy="200" r="6" fill="#4299e1"
stroke="white" stroke-width="2"/>
```
## Best Practices
### Coordinate Calculation
**Center Text in Rectangle:**
```javascript
textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)
```
**Position Diamond Points:**
```javascript
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:**
```xml
<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
fill="none" stroke="red" stroke-width="1"/>
```
**Grid Overlay:**
```xml
<!-- 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
```xml
<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)
```xml
<path d="M 10 10 L 20 20 M 20 10 L 10 20"
stroke="#f56565" stroke-width="3"
stroke-linecap="round"/>
```
### Warning Triangle
```xml
<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
```xml
<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>
```

77
skills/flowchart-creator/SKILL.md Normal file
View File

@@ -0,0 +1,77 @@
---
name: flowchart-creator
description: Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
---
# Flowchart Creator
Create interactive HTML flowcharts and process diagrams.
## When to Use
- "Create flowchart for [process]"
- "Generate process flow diagram"
- "Make decision tree for [workflow]"
- "Show workflow visualization"
## Components
1. **Start/End nodes**: rounded rectangles (#48bb78 green, #e53e3e red)
2. **Process boxes**: rectangles (#4299e1 blue)
3. **Decision diamonds**: diamonds (#f59e0b orange)
4. **Arrows**: connecting paths with labels
5. **Swimlanes**: grouped sections (optional)
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>[Process] Flowchart</title>
<style>
body { font-family: system-ui; }
svg { max-width: 100%; }
.start-end { fill: #48bb78; }
.process { fill: #4299e1; }
.decision { fill: #f59e0b; }
</style>
</head>
<body>
<h1>[Process Name] Flowchart</h1>
<svg viewBox="0 0 800 600">
<!-- flowchart nodes and connectors -->
</svg>
</body>
</html>
```
## Node Patterns
```html
<!-- Start/End (rounded rect) -->
<rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/>
<text x="400" y="80" text-anchor="middle">Start</text>
<!-- Process box -->
<rect x="350" y="150" width="100" height="60" class="process"/>
<text x="400" y="185" text-anchor="middle">Process</text>
<!-- Decision diamond -->
<path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/>
<text x="400" y="285" text-anchor="middle">Decision?</text>
<!-- Arrow -->
<path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
```
## Workflow
1. Break down process into steps
2. Identify decision points
3. Layout nodes vertically or horizontally
4. Connect with arrows
5. Add labels to decision branches
6. Write to `[process]-flowchart.html`
Keep layout clean, use consistent spacing (100px between nodes).

305
skills/flowchart-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,305 @@
<!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>

264
skills/flowchart-creator/assets/templates/flowchart_components.html Normal file
View File

@@ -0,0 +1,264 @@
<!-- FLOWCHART COMPONENTS LIBRARY -->
<!-- Copy and customize these SVG patterns for process flow diagrams -->
<svg viewBox="0 0 1200 800" style="width: 100%; height: auto;">
<!-- ===== ARROW MARKER DEFINITIONS ===== -->
<!-- Always include in <defs> section -->
<defs>
<!-- Standard arrow -->
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
</marker>
<!-- Colored arrows for different paths -->
<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>
<marker id="arrowhead-warning" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#f59e0b"/>
</marker>
</defs>
<!-- ===== BASIC SHAPES ===== -->
<!-- Rounded Rectangle (Process Box) -->
<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 Step
</text>
<text x="150" y="115" text-anchor="middle" fill="white" font-size="12">
Subtitle or detail
</text>
<!-- Circle (Start/End Node) -->
<circle cx="400" cy="100" r="50"
fill="#48bb78" stroke="#2f855a" stroke-width="3" opacity="0.9"/>
<text x="400" y="105" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
START
</text>
<!-- Diamond (Decision Node) -->
<path d="M 600 50 L 700 50 L 750 100 L 700 150 L 500 150 L 450 100 Z"
fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
<text x="600" y="95" text-anchor="middle" font-size="14" font-weight="bold">
Decision?
</text>
<text x="600" y="115" text-anchor="middle" font-size="11">
Yes/No
</text>
<!-- Hexagon (Preparation/Setup) -->
<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"/>
<text x="975" y="105" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Setup/Config
</text>
<!-- ===== ARROWS & CONNECTORS ===== -->
<!-- Straight arrow (horizontal) -->
<path d="M 250 100 L 350 100" stroke="#2d3748" stroke-width="3"
marker-end="url(#arrowhead)"/>
<!-- Straight arrow (vertical) -->
<path d="M 600 150 L 600 220" stroke="#2d3748" stroke-width="3"
marker-end="url(#arrowhead)"/>
<!-- L-shaped connector -->
<path d="M 750 100 L 850 100 L 850 200 L 950 200" stroke="#2d3748" stroke-width="3"
fill="none" marker-end="url(#arrowhead)"/>
<!-- Curved connector (bezier) -->
<path d="M 150 150 Q 150 250 300 250" stroke="#2d3748" stroke-width="3"
fill="none" marker-end="url(#arrowhead)"/>
<!-- Dashed line (optional/uncertain path) -->
<path d="M 400 150 L 400 250" stroke="#cbd5e0" stroke-width="2"
stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
<!-- ===== LABELS ON ARROWS ===== -->
<!-- YES/NO labels for decision branches -->
<text x="770" y="90" text-anchor="middle" fill="#2d3748" font-weight="bold" font-size="13">
YES
</text>
<text x="420" y="140" text-anchor="middle" fill="#2d3748" font-weight="bold" font-size="13">
NO
</text>
<!-- ===== STATUS BOXES ===== -->
<!-- Success status -->
<g id="success-box">
<rect x="100" y="300" width="180" height="100" rx="10"
fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="190" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
✓ SUCCESS
</text>
<text x="190" y="360" text-anchor="middle" fill="white" font-size="12">
Operation Complete
</text>
<text x="190" y="380" text-anchor="middle" fill="white" font-size="11">
Additional details
</text>
</g>
<!-- Error status -->
<g id="error-box">
<rect x="350" y="300" width="180" height="100" rx="10"
fill="#f56565" stroke="#c53030" stroke-width="3"/>
<text x="440" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
✗ ERROR
</text>
<text x="440" y="360" text-anchor="middle" fill="white" font-size="12">
Operation Failed
</text>
<text x="440" y="380" text-anchor="middle" fill="white" font-size="11">
Error details
</text>
</g>
<!-- Warning/Uncertain status -->
<g id="warning-box">
<rect x="600" y="300" width="180" height="100" rx="10"
fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
<text x="690" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
⚠ WARNING
</text>
<text x="690" y="360" text-anchor="middle" fill="white" font-size="12">
Needs Attention
</text>
<text x="690" y="380" text-anchor="middle" fill="white" font-size="11">
Warning details
</text>
</g>
<!-- In-Progress status -->
<g id="progress-box">
<rect x="850" y="300" width="180" height="100" rx="10"
fill="#ed8936" stroke="#c05621" stroke-width="3"/>
<text x="940" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
⟳ IN PROGRESS
</text>
<text x="940" y="360" text-anchor="middle" fill="white" font-size="12">
Processing...
</text>
<text x="940" y="380" text-anchor="middle" fill="white" font-size="11">
Status details
</text>
</g>
<!-- ===== SWIMLANES ===== -->
<!-- Background rectangles for different process areas -->
<rect x="50" y="450" width="350" height="300" rx="10"
fill="#e6f2ff" stroke="#4299e1" stroke-width="2" opacity="0.3"/>
<text x="225" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
Swimlane 1: Frontend
</text>
<rect x="450" y="450" width="350" height="300" rx="10"
fill="#e6ffe6" stroke="#48bb78" stroke-width="2" opacity="0.3"/>
<text x="625" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
Swimlane 2: Backend
</text>
<rect x="850" y="450" width="300" height="300" rx="10"
fill="#fff5e6" stroke="#f59e0b" stroke-width="2" opacity="0.3"/>
<text x="1000" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
Swimlane 3: Database
</text>
<!-- ===== GROUPINGS ===== -->
<!-- Dashed box for related items -->
<rect x="100" y="500" width="250" height="150" rx="8"
fill="none" stroke="#9f7aea" stroke-width="2" stroke-dasharray="8,4"/>
<text x="225" y="525" text-anchor="middle" font-size="13" fill="#6b46c1" font-weight="bold">
Related Process Group
</text>
<!-- Small process boxes within swimlane -->
<rect x="120" y="540" width="100" height="60" rx="8"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="170" y="575" text-anchor="middle" fill="white" font-size="12">
Sub-process
</text>
<rect x="230" y="540" width="100" height="60" rx="8"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="280" y="575" text-anchor="middle" fill="white" font-size="12">
Sub-process
</text>
<path d="M 220 570 L 230 570" stroke="#2d3748" stroke-width="2"
marker-end="url(#arrowhead)"/>
<!-- ===== NOTES/ANNOTATIONS ===== -->
<!-- Callout box with line -->
<rect x="900" y="550" width="150" height="80" rx="5"
fill="#fff" stroke="#cbd5e0" stroke-width="2"/>
<text x="975" y="575" text-anchor="middle" font-size="11" fill="#4a5568">
Note: This is an
</text>
<text x="975" y="595" text-anchor="middle" font-size="11" fill="#4a5568">
annotation or
</text>
<text x="975" y="615" text-anchor="middle" font-size="11" fill="#4a5568">
additional detail
</text>
<!-- Leader line from callout to target -->
<path d="M 900 590 L 850 590" stroke="#cbd5e0" stroke-width="1"
stroke-dasharray="3,3"/>
</svg>
<!-- ===== USAGE EXAMPLES ===== -->
<!--
SIMPLE LINEAR FLOW:
Start → Process → Decision → (Yes → Success) or (No → Error)
<svg viewBox="0 0 1200 400">
<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>
<circle cx="150" cy="200" r="50" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="150" y="205" text-anchor="middle" fill="white" font-weight="bold">START</text>
<path d="M 200 200 L 300 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<rect x="300" y="150" width="200" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="400" y="205" text-anchor="middle" fill="white" font-weight="bold">Process Step</text>
<path d="M 500 200 L 600 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<path d="M 700 150 L 800 150 L 850 200 L 800 250 L 600 250 L 550 200 Z"
fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
<text x="700" y="205" text-anchor="middle" font-weight="bold">Decision?</text>
<path d="M 850 200 L 950 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="895" y="190" text-anchor="middle" fill="#2d3748" font-weight="bold">YES</text>
<rect x="950" y="170" width="150" height="60" rx="10" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="1025" y="205" text-anchor="middle" fill="white" font-weight="bold">SUCCESS</text>
<path d="M 700 250 L 700 320 L 1000 320" stroke="#f56565" stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="720" y="290" text-anchor="start" fill="#2d3748" font-weight="bold">NO</text>
<rect x="1000" y="290" width="150" height="60" rx="10" fill="#f56565" stroke="#c53030" stroke-width="3"/>
<text x="1075" y="325" text-anchor="middle" fill="white" font-weight="bold">ERROR</text>
</svg>
-->
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

541
skills/flowchart-creator/references/design_patterns.md Normal file
View File

@@ -0,0 +1,541 @@
# Design Patterns Reference
Complete design system guidelines for creating visually stunning HTML documentation.
## Color System
### Primary Palette
**Gradient Background:**
```css
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):**
```css
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):**
```css
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):**
```css
h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
```
**Code Highlighting:**
```css
.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:**
```css
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:**
```css
display: flex;
justify-content: center;
align-items: center;
```
**Space Between:**
```css
display: flex;
justify-content: space-between;
align-items: center;
```
**Wrapped Row:**
```css
display: flex;
flex-wrap: wrap;
gap: 20px;
```
## Visual Effects
### Shadows
**Card Shadow:**
```css
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
```
- Use for: Main container, elevated cards
**Metric Card Shadow:**
```css
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
```
- Use for: Metric cards, smaller elevation
**Subtle Shadow:**
```css
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:**
```css
/* 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):**
```css
@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:**
```html
<div class="metric-card">
<div class="metric-value">[LARGE NUMBER]</div>
<div class="metric-label">[DESCRIPTION]</div>
</div>
```
**With Custom Color:**
```html
<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:**
```html
<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
Indented content
</div>
```
**CSS:**
```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:**
```html
<div class="example-box">
<div class="example-title">[TITLE]</div>
<p>[CONTENT]</p>
</div>
```
**CSS:**
```css
.example-box {
background: #fff;
border: 2px solid #667eea;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
```
### Legends
**Pattern:**
```html
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>[DESCRIPTION]</span>
</div>
<!-- More items -->
</div>
```
**CSS:**
```css
.legend {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background: #edf2f7;
border-radius: 10px;
}
```
## SVG Styling
### Default SVG Styles
**Container:**
```css
svg {
width: 100%;
height: auto;
}
```
**Text:**
```css
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):**
```html
<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:**
```css
.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:**
```css
@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.

733
skills/flowchart-creator/references/svg_library.md Normal file
View File

@@ -0,0 +1,733 @@
# SVG Component Library
Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.
## SVG Fundamentals
### Basic Structure
```xml
<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:**
```xml
<!-- 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:**
```xml
<rect x="100" y="100" width="200" height="100"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
**Rounded Rectangle:**
```xml
<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:**
```xml
<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:**
```xml
<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):**
```xml
<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:**
```xml
<circle cx="300" cy="200" r="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
### Ellipse
```xml
<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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<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:**
```xml
<path d="M 500 100 L 600 200 L 400 200 Z"
fill="#f56565" stroke="#c53030" stroke-width="3"/>
```
**Pentagon:**
```xml
<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:**
```xml
<line x1="100" y1="200" x2="300" y2="200"
stroke="#2d3748" stroke-width="3"/>
```
**Vertical:**
```xml
<line x1="200" y1="100" x2="200" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Diagonal:**
```xml
<line x1="100" y1="100" x2="300" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Dashed Line:**
```xml
<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:**
```xml
<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:**
```xml
<path d="M 250 100 L 400 100 L 400 200"
stroke="#2d3748" stroke-width="3" fill="none"/>
```
**Multi-segment:**
```xml
<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:**
```xml
<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:**
```xml
<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:**
```xml
<!-- 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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<text x="100" y="100" font-size="16" fill="#2d3748">
Simple Text
</text>
```
### Text Anchoring
**Horizontal Alignment:**
```xml
<!-- 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:**
```xml
<!-- 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
```xml
<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:**
```xml
<text x="100" y="100" font-family="'Segoe UI', sans-serif">
Custom Font
</text>
```
### Multi-line Text
**Using Multiple <text> Elements:**
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<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>)
```xml
<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:**
```xml
<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:**
```xml
<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
```xml
<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)
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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)
```xml
<circle cx="300" cy="300" r="150" fill="none"
stroke="#4299e1" stroke-width="80"/>
```
**Multi-segment Donut:**
```xml
<!-- 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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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
```xml
<circle cx="300" cy="200" r="6" fill="#4299e1"
stroke="white" stroke-width="2"/>
```
## Best Practices
### Coordinate Calculation
**Center Text in Rectangle:**
```javascript
textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)
```
**Position Diamond Points:**
```javascript
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:**
```xml
<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
fill="none" stroke="red" stroke-width="1"/>
```
**Grid Overlay:**
```xml
<!-- 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
```xml
<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)
```xml
<path d="M 10 10 L 20 20 M 20 10 L 10 20"
stroke="#f56565" stroke-width="3"
stroke-linecap="round"/>
```
### Warning Triangle
```xml
<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
```xml
<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>
```

86
skills/technical-doc-creator/SKILL.md Normal file
View File

@@ -0,0 +1,86 @@
---
name: technical-doc-creator
description: 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.
---
# 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
```html
<!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
```html
<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
```html
<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).

305
skills/technical-doc-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,305 @@
<!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>

541
skills/technical-doc-creator/references/design_patterns.md Normal file
View File

@@ -0,0 +1,541 @@
# Design Patterns Reference
Complete design system guidelines for creating visually stunning HTML documentation.
## Color System
### Primary Palette
**Gradient Background:**
```css
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):**
```css
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):**
```css
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):**
```css
h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
```
**Code Highlighting:**
```css
.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:**
```css
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:**
```css
display: flex;
justify-content: center;
align-items: center;
```
**Space Between:**
```css
display: flex;
justify-content: space-between;
align-items: center;
```
**Wrapped Row:**
```css
display: flex;
flex-wrap: wrap;
gap: 20px;
```
## Visual Effects
### Shadows
**Card Shadow:**
```css
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
```
- Use for: Main container, elevated cards
**Metric Card Shadow:**
```css
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
```
- Use for: Metric cards, smaller elevation
**Subtle Shadow:**
```css
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:**
```css
/* 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):**
```css
@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:**
```html
<div class="metric-card">
<div class="metric-value">[LARGE NUMBER]</div>
<div class="metric-label">[DESCRIPTION]</div>
</div>
```
**With Custom Color:**
```html
<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:**
```html
<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
Indented content
</div>
```
**CSS:**
```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:**
```html
<div class="example-box">
<div class="example-title">[TITLE]</div>
<p>[CONTENT]</p>
</div>
```
**CSS:**
```css
.example-box {
background: #fff;
border: 2px solid #667eea;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
```
### Legends
**Pattern:**
```html
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>[DESCRIPTION]</span>
</div>
<!-- More items -->
</div>
```
**CSS:**
```css
.legend {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background: #edf2f7;
border-radius: 10px;
}
```
## SVG Styling
### Default SVG Styles
**Container:**
```css
svg {
width: 100%;
height: auto;
}
```
**Text:**
```css
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):**
```html
<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:**
```css
.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:**
```css
@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.

733
skills/technical-doc-creator/references/svg_library.md Normal file
View File

@@ -0,0 +1,733 @@
# SVG Component Library
Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.
## SVG Fundamentals
### Basic Structure
```xml
<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:**
```xml
<!-- 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:**
```xml
<rect x="100" y="100" width="200" height="100"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
**Rounded Rectangle:**
```xml
<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:**
```xml
<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:**
```xml
<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):**
```xml
<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:**
```xml
<circle cx="300" cy="200" r="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
### Ellipse
```xml
<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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<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:**
```xml
<path d="M 500 100 L 600 200 L 400 200 Z"
fill="#f56565" stroke="#c53030" stroke-width="3"/>
```
**Pentagon:**
```xml
<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:**
```xml
<line x1="100" y1="200" x2="300" y2="200"
stroke="#2d3748" stroke-width="3"/>
```
**Vertical:**
```xml
<line x1="200" y1="100" x2="200" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Diagonal:**
```xml
<line x1="100" y1="100" x2="300" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Dashed Line:**
```xml
<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:**
```xml
<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:**
```xml
<path d="M 250 100 L 400 100 L 400 200"
stroke="#2d3748" stroke-width="3" fill="none"/>
```
**Multi-segment:**
```xml
<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:**
```xml
<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:**
```xml
<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:**
```xml
<!-- 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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<text x="100" y="100" font-size="16" fill="#2d3748">
Simple Text
</text>
```
### Text Anchoring
**Horizontal Alignment:**
```xml
<!-- 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:**
```xml
<!-- 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
```xml
<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:**
```xml
<text x="100" y="100" font-family="'Segoe UI', sans-serif">
Custom Font
</text>
```
### Multi-line Text
**Using Multiple <text> Elements:**
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<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>)
```xml
<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:**
```xml
<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:**
```xml
<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
```xml
<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)
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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)
```xml
<circle cx="300" cy="300" r="150" fill="none"
stroke="#4299e1" stroke-width="80"/>
```
**Multi-segment Donut:**
```xml
<!-- 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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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
```xml
<circle cx="300" cy="200" r="6" fill="#4299e1"
stroke="white" stroke-width="2"/>
```
## Best Practices
### Coordinate Calculation
**Center Text in Rectangle:**
```javascript
textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)
```
**Position Diamond Points:**
```javascript
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:**
```xml
<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
fill="none" stroke="red" stroke-width="1"/>
```
**Grid Overlay:**
```xml
<!-- 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
```xml
<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)
```xml
<path d="M 10 10 L 20 20 M 20 10 L 10 20"
stroke="#f56565" stroke-width="3"
stroke-linecap="round"/>
```
### Warning Triangle
```xml
<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
```xml
<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>
```

66
skills/timeline-creator/SKILL.md Normal file
View File

@@ -0,0 +1,66 @@
---
name: timeline-creator
description: Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project schedules, or milestone visualizations.
---
# Timeline Creator
Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.
## When to Use
- "Create timeline for [project]"
- "Generate roadmap for Q1-Q4"
- "Make Gantt chart for schedule"
- "Show project milestones"
## Components
1. **Timeline Header**: project name, date range, completion %
2. **Phase Groups**: Q1, Q2, Q3, Q4 or custom phases
3. **Timeline Items**: tasks with start/end dates, progress, status
4. **Milestones**: key deliverables with dates
5. **Gantt Visualization**: horizontal bars showing duration
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>[Project] Timeline</title>
<style>
body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
.timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
.milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
/* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
</style>
</head>
<body>
<h1>[Project] Timeline</h1>
<!-- Phase sections with timeline bars -->
<!-- Milestones list -->
</body>
</html>
```
## Timeline Bar Pattern
```html
<div class="timeline-item">
<span>Task Name</span>
<div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
<span>[start] - [end]</span>
</div>
```
## Workflow
1. Extract tasks, dates, phases from project
2. Calculate duration percentages
3. Group by phases (quarters or custom)
4. Create HTML with Gantt-style bars
5. Add milestones section
6. Write to `[project]-timeline.html`
Use semantic colors for status, keep layout responsive.

305
skills/timeline-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,305 @@
<!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>

477
skills/timeline-creator/assets/templates/timeline_components.html Normal file
View File

@@ -0,0 +1,477 @@
<!-- TIMELINE COMPONENTS LIBRARY -->
<!-- Copy and customize these patterns for project timelines and roadmaps -->
<!-- ===== HORIZONTAL TIMELINE ===== -->
<svg viewBox="0 0 1200 400" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Project Timeline
</text>
<!-- Main timeline bar -->
<rect x="100" y="180" width="1000" height="20" rx="10" fill="#e2e8f0"/>
<rect x="100" y="180" width="600" height="20" rx="10" fill="#4299e1"/>
<!-- Current date indicator -->
<line x1="700" y1="150" x2="700" y2="230" stroke="#f56565" stroke-width="3" stroke-dasharray="5,5"/>
<text x="700" y="140" text-anchor="middle" font-size="12" fill="#f56565" font-weight="bold">
TODAY
</text>
<!-- Milestone 1 -->
<circle cx="200" cy="190" r="15" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="200" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
Q1
</text>
<text x="200" y="270" text-anchor="middle" font-size="12" fill="#718096">
Planning
</text>
<text x="200" y="120" text-anchor="middle" font-size="11" fill="#48bb78" font-weight="bold">
✓ Complete
</text>
<!-- Milestone 2 -->
<circle cx="400" cy="190" r="15" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="400" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
Q2
</text>
<text x="400" y="270" text-anchor="middle" font-size="12" fill="#718096">
Development
</text>
<text x="400" y="120" text-anchor="middle" font-size="11" fill="#48bb78" font-weight="bold">
✓ Complete
</text>
<!-- Milestone 3 (in progress) -->
<circle cx="600" cy="190" r="15" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
<text x="600" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
Q3
</text>
<text x="600" y="270" text-anchor="middle" font-size="12" fill="#718096">
Testing
</text>
<text x="600" y="120" text-anchor="middle" font-size="11" fill="#f59e0b" font-weight="bold">
⟳ In Progress
</text>
<!-- Milestone 4 (pending) -->
<circle cx="800" cy="190" r="15" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
<text x="800" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
Q4
</text>
<text x="800" y="270" text-anchor="middle" font-size="12" fill="#718096">
Deployment
</text>
<text x="800" y="120" text-anchor="middle" font-size="11" fill="#718096">
Pending
</text>
<!-- Milestone 5 (pending) -->
<circle cx="1000" cy="190" r="15" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
<text x="1000" y="250" text-anchor="middle" font-size="14" fill="#2d3748" font-weight="bold">
Q1 '26
</text>
<text x="1000" y="270" text-anchor="middle" font-size="12" fill="#718096">
Maintenance
</text>
<text x="1000" y="120" text-anchor="middle" font-size="11" fill="#718096">
Pending
</text>
</svg>
<!-- ===== VERTICAL TIMELINE ===== -->
<svg viewBox="0 0 800 1000" style="width: 100%; height: auto;">
<text x="400" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Development Roadmap
</text>
<!-- Vertical timeline line -->
<line x1="100" y1="80" x2="100" y2="950" stroke="#e2e8f0" stroke-width="4"/>
<!-- Event 1 (completed) -->
<circle cx="100" cy="120" r="12" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<rect x="140" y="80" width="600" height="80" rx="10" fill="#e6f4ea" stroke="#48bb78" stroke-width="2"/>
<text x="160" y="105" font-size="14" fill="#2d3748" font-weight="bold">
Phase 1: Requirements Gathering
</text>
<text x="160" y="130" font-size="12" fill="#718096">
January 2025 • Duration: 2 weeks
</text>
<text x="160" y="150" font-size="11" fill="#48bb78" font-weight="bold">
✓ Completed
</text>
<!-- Event 2 (completed) -->
<circle cx="100" cy="250" r="12" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<rect x="140" y="210" width="600" height="80" rx="10" fill="#e6f4ea" stroke="#48bb78" stroke-width="2"/>
<text x="160" y="235" font-size="14" fill="#2d3748" font-weight="bold">
Phase 2: Design & Architecture
</text>
<text x="160" y="260" font-size="12" fill="#718096">
February 2025 • Duration: 3 weeks
</text>
<text x="160" y="280" font-size="11" fill="#48bb78" font-weight="bold">
✓ Completed
</text>
<!-- Event 3 (in progress) -->
<circle cx="100" cy="400" r="12" fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
<rect x="140" y="360" width="600" height="80" rx="10" fill="#fffbeb" stroke="#f59e0b" stroke-width="2"/>
<text x="160" y="385" font-size="14" fill="#2d3748" font-weight="bold">
Phase 3: Development Sprint 1
</text>
<text x="160" y="410" font-size="12" fill="#718096">
March 2025 • Duration: 4 weeks
</text>
<text x="160" y="430" font-size="11" fill="#f59e0b" font-weight="bold">
⟳ In Progress (60% complete)
</text>
<!-- Event 4 (pending) -->
<circle cx="100" cy="550" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
<rect x="140" y="510" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
<text x="160" y="535" font-size="14" fill="#2d3748" font-weight="bold">
Phase 4: Development Sprint 2
</text>
<text x="160" y="560" font-size="12" fill="#718096">
April 2025 • Duration: 4 weeks
</text>
<text x="160" y="580" font-size="11" fill="#718096">
Pending
</text>
<!-- Event 5 (pending) -->
<circle cx="100" cy="700" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
<rect x="140" y="660" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
<text x="160" y="685" font-size="14" fill="#2d3748" font-weight="bold">
Phase 5: Testing & QA
</text>
<text x="160" y="710" font-size="12" fill="#718096">
May 2025 • Duration: 2 weeks
</text>
<text x="160" y="730" font-size="11" fill="#718096">
Pending
</text>
<!-- Event 6 (pending) -->
<circle cx="100" cy="850" r="12" fill="#cbd5e0" stroke="#a0aec0" stroke-width="3"/>
<rect x="140" y="810" width="600" height="80" rx="10" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2"/>
<text x="160" y="835" font-size="14" fill="#2d3748" font-weight="bold">
Phase 6: Production Deployment
</text>
<text x="160" y="860" font-size="12" fill="#718096">
June 2025 • Duration: 1 week
</text>
<text x="160" y="880" font-size="11" fill="#718096">
Pending
</text>
</svg>
<!-- ===== GANTT CHART STYLE ===== -->
<svg viewBox="0 0 1200 600" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Project Gantt Chart
</text>
<!-- Header row -->
<rect x="50" y="60" width="250" height="40" fill="#667eea"/>
<text x="175" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Task Name
</text>
<!-- Month headers -->
<rect x="300" y="60" width="200" height="40" fill="#764ba2"/>
<text x="400" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Jan
</text>
<rect x="500" y="60" width="200" height="40" fill="#764ba2"/>
<text x="600" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Feb
</text>
<rect x="700" y="60" width="200" height="40" fill="#764ba2"/>
<text x="800" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Mar
</text>
<rect x="900" y="60" width="200" height="40" fill="#764ba2"/>
<text x="1000" y="85" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
Apr
</text>
<!-- Task 1 -->
<rect x="50" y="100" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="70" y="135" font-size="13" fill="#2d3748" font-weight="500">
Requirements Analysis
</text>
<rect x="300" y="100" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="310" y="115" width="180" height="30" rx="5" fill="#48bb78"/>
<text x="400" y="135" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
✓ Complete
</text>
<!-- Task 2 -->
<rect x="50" y="160" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="70" y="195" font-size="13" fill="#2d3748" font-weight="500">
Design Phase
</text>
<rect x="300" y="160" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="360" y="175" width="280" height="30" rx="5" fill="#48bb78"/>
<text x="500" y="195" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
✓ Complete
</text>
<!-- Task 3 (in progress) -->
<rect x="50" y="220" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="70" y="255" font-size="13" fill="#2d3748" font-weight="500">
Development Sprint 1
</text>
<rect x="300" y="220" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="510" y="235" width="380" height="30" rx="5" fill="#f59e0b"/>
<text x="700" y="255" text-anchor="middle" fill="white" font-size="11" font-weight="bold">
⟳ In Progress (65%)
</text>
<!-- Task 4 (pending) -->
<rect x="50" y="280" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="70" y="315" font-size="13" fill="#2d3748" font-weight="500">
Development Sprint 2
</text>
<rect x="300" y="280" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="710" y="295" width="280" height="30" rx="5" fill="#cbd5e0"/>
<text x="850" y="315" text-anchor="middle" fill="#718096" font-size="11" font-weight="bold">
Pending
</text>
<!-- Task 5 (pending) -->
<rect x="50" y="340" width="250" height="60" fill="#f7fafc" stroke="#e2e8f0" stroke-width="1"/>
<text x="70" y="375" font-size="13" fill="#2d3748" font-weight="500">
Testing
</text>
<rect x="300" y="340" width="1100" height="60" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
<rect x="910" y="355" width="180" height="30" rx="5" fill="#cbd5e0"/>
<text x="1000" y="375" text-anchor="middle" fill="#718096" font-size="11" font-weight="bold">
Pending
</text>
<!-- Dependency arrows -->
<defs>
<marker id="dep-arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#9f7aea"/>
</marker>
</defs>
<path d="M 400 160 L 400 175" stroke="#9f7aea" stroke-width="2"
marker-end="url(#dep-arrow)" stroke-dasharray="4,2"/>
<path d="M 640 220 L 640 235" stroke="#9f7aea" stroke-width="2"
marker-end="url(#dep-arrow)" stroke-dasharray="4,2"/>
</svg>
<!-- ===== MILESTONE ROADMAP ===== -->
<svg viewBox="0 0 1200 500" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Product Roadmap 2025
</text>
<!-- Quarter 1 -->
<g>
<rect x="50" y="80" width="260" height="150" rx="15" fill="#e6f4ea" stroke="#48bb78" stroke-width="3"/>
<text x="180" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
Q1 2025
</text>
<text x="180" y="135" text-anchor="middle" font-size="12" fill="#48bb78" font-weight="bold">
✓ COMPLETED
</text>
<text x="70" y="160" font-size="11" fill="#2d3748">
• User authentication
</text>
<text x="70" y="180" font-size="11" fill="#2d3748">
• Basic dashboard
</text>
<text x="70" y="200" font-size="11" fill="#2d3748">
• API v1.0
</text>
<text x="70" y="220" font-size="11" fill="#2d3748">
• Mobile responsive
</text>
</g>
<!-- Quarter 2 -->
<g>
<rect x="340" y="80" width="260" height="150" rx="15" fill="#fffbeb" stroke="#f59e0b" stroke-width="3"/>
<text x="470" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
Q2 2025
</text>
<text x="470" y="135" text-anchor="middle" font-size="12" fill="#f59e0b" font-weight="bold">
⟳ IN PROGRESS
</text>
<text x="360" y="160" font-size="11" fill="#2d3748">
• Advanced analytics
</text>
<text x="360" y="180" font-size="11" fill="#2d3748">
• Team collaboration
</text>
<text x="360" y="200" font-size="11" fill="#2d3748">
• Export features
</text>
<text x="360" y="220" font-size="11" fill="#2d3748">
• Integration hooks
</text>
</g>
<!-- Quarter 3 -->
<g>
<rect x="630" y="80" width="260" height="150" rx="15" fill="#f7fafc" stroke="#cbd5e0" stroke-width="3"/>
<text x="760" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
Q3 2025
</text>
<text x="760" y="135" text-anchor="middle" font-size="12" fill="#718096" font-weight="bold">
PLANNED
</text>
<text x="650" y="160" font-size="11" fill="#2d3748">
• AI-powered insights
</text>
<text x="650" y="180" font-size="11" fill="#2d3748">
• Custom workflows
</text>
<text x="650" y="200" font-size="11" fill="#2d3748">
• White-label options
</text>
<text x="650" y="220" font-size="11" fill="#2d3748">
• API v2.0
</text>
</g>
<!-- Quarter 4 -->
<g>
<rect x="920" y="80" width="260" height="150" rx="15" fill="#f7fafc" stroke="#cbd5e0" stroke-width="3"/>
<text x="1050" y="110" text-anchor="middle" font-size="18" fill="#2d3748" font-weight="bold">
Q4 2025
</text>
<text x="1050" y="135" text-anchor="middle" font-size="12" fill="#718096" font-weight="bold">
PLANNED
</text>
<text x="940" y="160" font-size="11" fill="#2d3748">
• Enterprise features
</text>
<text x="940" y="180" font-size="11" fill="#2d3748">
• Advanced security
</text>
<text x="940" y="200" font-size="11" fill="#2d3748">
• Marketplace launch
</text>
<text x="940" y="220" font-size="11" fill="#2d3748">
• Multi-tenancy
</text>
</g>
<!-- Priority badges -->
<g>
<rect x="50" y="270" width="150" height="40" rx="20" fill="#f56565"/>
<text x="125" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
🔥 Critical
</text>
</g>
<g>
<rect x="220" y="270" width="150" height="40" rx="20" fill="#f59e0b"/>
<text x="295" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
⚡ High
</text>
</g>
<g>
<rect x="390" y="270" width="150" height="40" rx="20" fill="#4299e1"/>
<text x="465" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
✓ Medium
</text>
</g>
<g>
<rect x="560" y="270" width="150" height="40" rx="20" fill="#cbd5e0"/>
<text x="635" y="295" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
○ Low
</text>
</g>
<!-- Legend -->
<text x="50" y="360" font-size="14" fill="#718096" font-style="italic">
Priority levels indicate urgency and impact on overall product goals
</text>
</svg>
<!-- ===== SWIMLANE TIMELINE ===== -->
<svg viewBox="0 0 1200 600" style="width: 100%; height: auto;">
<text x="600" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#2d3748">
Team Timeline View
</text>
<!-- Team labels -->
<text x="40" y="125" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
Frontend
</text>
<text x="40" y="275" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
Backend
</text>
<text x="40" y="425" text-anchor="end" font-size="14" fill="#2d3748" font-weight="bold">
QA
</text>
<!-- Time grid -->
<line x1="100" y1="60" x2="100" y2="500" stroke="#e2e8f0" stroke-width="1"/>
<line x1="400" y1="60" x2="400" y2="500" stroke="#e2e8f0" stroke-width="1"/>
<line x1="700" y1="60" x2="700" y2="500" stroke="#e2e8f0" stroke-width="1"/>
<line x1="1000" y1="60" x2="1000" y2="500" stroke="#e2e8f0" stroke-width="1"/>
<!-- Month labels -->
<text x="250" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 1-2</text>
<text x="550" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 3-4</text>
<text x="850" y="80" text-anchor="middle" font-size="12" fill="#718096">Week 5-6</text>
<!-- Swimlanes -->
<line x1="60" y1="170" x2="1150" y2="170" stroke="#e2e8f0" stroke-width="2"/>
<line x1="60" y1="320" x2="1150" y2="320" stroke="#e2e8f0" stroke-width="2"/>
<line x1="60" y1="470" x2="1150" y2="470" stroke="#e2e8f0" stroke-width="2"/>
<!-- Frontend tasks -->
<rect x="110" y="110" width="250" height="40" rx="8" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="235" y="135" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
UI Components
</text>
<rect x="420" y="110" width="250" height="40" rx="8" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="545" y="135" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
Integration Testing
</text>
<!-- Backend tasks -->
<rect x="260" y="260" width="300" height="40" rx="8" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="410" y="285" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
API Development
</text>
<rect x="720" y="260" width="200" height="40" rx="8" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="820" y="285" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
Deploy & Monitor
</text>
<!-- QA tasks -->
<rect x="470" y="410" width="350" height="40" rx="8" fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="645" y="435" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
End-to-End Testing
</text>
<rect x="970" y="410" width="150" height="40" rx="8" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="1045" y="435" text-anchor="middle" fill="white" font-size="12" font-weight="bold">
Sign-off
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

541
skills/timeline-creator/references/design_patterns.md Normal file
View File

@@ -0,0 +1,541 @@
# Design Patterns Reference
Complete design system guidelines for creating visually stunning HTML documentation.
## Color System
### Primary Palette
**Gradient Background:**
```css
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):**
```css
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):**
```css
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):**
```css
h1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
```
**Code Highlighting:**
```css
.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:**
```css
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:**
```css
display: flex;
justify-content: center;
align-items: center;
```
**Space Between:**
```css
display: flex;
justify-content: space-between;
align-items: center;
```
**Wrapped Row:**
```css
display: flex;
flex-wrap: wrap;
gap: 20px;
```
## Visual Effects
### Shadows
**Card Shadow:**
```css
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
```
- Use for: Main container, elevated cards
**Metric Card Shadow:**
```css
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
```
- Use for: Metric cards, smaller elevation
**Subtle Shadow:**
```css
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:**
```css
/* 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):**
```css
@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:**
```html
<div class="metric-card">
<div class="metric-value">[LARGE NUMBER]</div>
<div class="metric-label">[DESCRIPTION]</div>
</div>
```
**With Custom Color:**
```html
<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:**
```html
<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
Indented content
</div>
```
**CSS:**
```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:**
```html
<div class="example-box">
<div class="example-title">[TITLE]</div>
<p>[CONTENT]</p>
</div>
```
**CSS:**
```css
.example-box {
background: #fff;
border: 2px solid #667eea;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
```
### Legends
**Pattern:**
```html
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>[DESCRIPTION]</span>
</div>
<!-- More items -->
</div>
```
**CSS:**
```css
.legend {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background: #edf2f7;
border-radius: 10px;
}
```
## SVG Styling
### Default SVG Styles
**Container:**
```css
svg {
width: 100%;
height: auto;
}
```
**Text:**
```css
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):**
```html
<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:**
```css
.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:**
```css
@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.

733
skills/timeline-creator/references/svg_library.md Normal file
View File

@@ -0,0 +1,733 @@
# SVG Component Library
Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.
## SVG Fundamentals
### Basic Structure
```xml
<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:**
```xml
<!-- 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:**
```xml
<rect x="100" y="100" width="200" height="100"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
**Rounded Rectangle:**
```xml
<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:**
```xml
<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:**
```xml
<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):**
```xml
<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:**
```xml
<circle cx="300" cy="200" r="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
```
### Ellipse
```xml
<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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<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:**
```xml
<path d="M 500 100 L 600 200 L 400 200 Z"
fill="#f56565" stroke="#c53030" stroke-width="3"/>
```
**Pentagon:**
```xml
<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:**
```xml
<line x1="100" y1="200" x2="300" y2="200"
stroke="#2d3748" stroke-width="3"/>
```
**Vertical:**
```xml
<line x1="200" y1="100" x2="200" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Diagonal:**
```xml
<line x1="100" y1="100" x2="300" y2="300"
stroke="#2d3748" stroke-width="3"/>
```
**Dashed Line:**
```xml
<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:**
```xml
<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:**
```xml
<path d="M 250 100 L 400 100 L 400 200"
stroke="#2d3748" stroke-width="3" fill="none"/>
```
**Multi-segment:**
```xml
<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:**
```xml
<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:**
```xml
<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:**
```xml
<!-- 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):**
```xml
<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):**
```xml
<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:**
```xml
<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
```xml
<text x="100" y="100" font-size="16" fill="#2d3748">
Simple Text
</text>
```
### Text Anchoring
**Horizontal Alignment:**
```xml
<!-- 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:**
```xml
<!-- 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
```xml
<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:**
```xml
<text x="100" y="100" font-family="'Segoe UI', sans-serif">
Custom Font
</text>
```
### Multi-line Text
**Using Multiple <text> Elements:**
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<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>)
```xml
<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:**
```xml
<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:**
```xml
<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
```xml
<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)
```xml
<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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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)
```xml
<circle cx="300" cy="300" r="150" fill="none"
stroke="#4299e1" stroke-width="80"/>
```
**Multi-segment Donut:**
```xml
<!-- 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
```xml
<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
```xml
<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
```xml
<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
```xml
<!-- 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
```xml
<circle cx="300" cy="200" r="6" fill="#4299e1"
stroke="white" stroke-width="2"/>
```
## Best Practices
### Coordinate Calculation
**Center Text in Rectangle:**
```javascript
textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)
```
**Position Diamond Points:**
```javascript
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:**
```xml
<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
fill="none" stroke="red" stroke-width="1"/>
```
**Grid Overlay:**
```xml
<!-- 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
```xml
<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)
```xml
<path d="M 10 10 L 20 20 M 20 10 L 10 20"
stroke="#f56565" stroke-width="3"
stroke-linecap="round"/>
```
### Warning Triangle
```xml
<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
```xml
<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>
```