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

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