메뉴
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 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
| 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