AgentSkillsCN

svg-gantt-generator

运用程序化方式生成 SVG 甘特图，为各阶段赋予专属色彩，清晰标注任务条、子任务、关键里程碑，并采用深色主题设计。适用于创建或更新可视化进度表时使用。

SKILL.md
--- frontmatter
name: svg-gantt-generator
description: Generate a programmatic SVG Gantt chart with phase-coded colors, task bars, sub-tasks, milestones, and dark-theme design. Use when creating or updating the visual timeline.
user-invocable: false
allowed-tools: Read, Grep, Glob, Write

Generate .github/gantt-chart.svg from structured timeline data.

This skill is invoked by gantt-chart and project-architect, not directly by users.

SVG Specification

Layout

  • •Canvas: 1280px wide, height = 120 + (epic_count x 60) + 80
  • •Background: #0f172a (slate-950)
  • •Left margin: 200px for epic labels
  • •Week columns: (1280 - 200) / total_weeks per column

Required Elements

  1. •

    Gradient definitions for each phase and sub-task variant:

    • •Phase 1: #3b82f6 → #60a5fa (blue)
    • •Phase 2: #10b981 → #34d399 (green)
    • •Phase 3: #f59e0b → #fbbf24 (amber)
    • •Phase 4: #8b5cf6 → #a78bfa (purple)
    • •Sub-task variants at 70% opacity with lighter shades
  2. •

    Background: Full-width rect with #0f172a fill, 12px border radius

  3. •

    Title: Centered at y=40, #f8fafc, 20px bold

  4. •

    Week header row: Week labels (W1, W2, ...) centered in columns

  5. •

    Grid lines: Vertical lines per week at 10% opacity (#334155)

  6. •

    Phase background bands: Colored rects at 5% opacity spanning phase weeks

  7. •

    Epic bars: For each epic:

    • •Label at x=-10 (right-aligned), #94a3b8, 11px
    • •Main bar: gradient fill, 24px height, 4px border radius
    • •Sub-task bars: lighter shade, 16px height, offset below parent
    • •Sub-task labels: #cbd5e1, 9px
  8. •

    Milestone diamonds: <polygon> at milestone positions with phase color

  9. •

    Legend: Phase color key at bottom

Typography

  • •Font family: -apple-system, 'Segoe UI', Arial, sans-serif
  • •Title: 20px bold, #f8fafc
  • •Epic labels: 11px, #94a3b8
  • •Sub-task labels: 9px, #cbd5e1
  • •Week headers: 10px, #64748b

Post-Write Validation (MANDATORY)

After writing the SVG, run validation and fix any errors before proceeding. See SVG Validation for the full procedure and common pitfalls.

bash
cd workspace && node validate-svg.js ../.github/gantt-chart.svg

Quality Criteria

  • • XML validates without errors (npm run validate-svg passes)
  • • Renders in GitHub markdown (no external deps)
  • • All epics and sub-tasks shown
  • • Phase colors consistent
  • • Week grid aligned
  • • Milestone markers at correct positions
  • • Dark theme with accessible contrast