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

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