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

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>
```