菜单
Create visual project summary infographics for the README and GitHub social preview images with before/after comparison, ROI highlights, and phase timeline. Use after core artifacts are complete.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Create a visual project timeline with SVG Gantt chart, Mermaid critical path diagram, dependency matrix, and milestone tracking. Use after JIRA structure and dependency analysis are complete.
Conduct a structured interview to elicit project knowledge and produce a complete PROJECT-CONTEXT.md. Use when starting a new project or when PROJECT-CONTEXT.md needs to be created or refined.
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.
基于 SOC 职业分类
| name | infographic-generator |
| description | Create visual project summary infographics for the README and GitHub social preview images with before/after comparison, ROI highlights, and phase timeline. Use after core artifacts are complete. |
| user-invocable | false |
| allowed-tools | Read, Grep, Glob, Write |
Generate visual summary SVGs. Invoked by documentation-architect and project-architect.
.github/readme-infographic.svg (800x420px, light theme).github/social-preview.svg (1280x640px, light theme).github/social-preview-dark.svg (1280x640px, dark theme)| Element | Light | Dark |
|---|---|---|
| Background | #f8fafc → #e2e8f0 | #0f172a → #1e293b |
| Text primary | #0f172a | #f8fafc |
| Card bg | #ffffff | #1e293b |
| Success | #10b981 | #34d399 |
| Danger | #ef4444 | #f87171 |
After writing each SVG, run validation and fix any errors before proceeding. See SVG Validation for the full procedure and common pitfalls.
cd workspace && node validate-svg.js ../.github/readme-infographic.svg ../.github/social-preview.svg ../.github/social-preview-dark.svg
npm run validate-svg passes)<picture> element