메뉴
Design system intelligence, cinematic scroll animations, data visualization, and SVG creation - all in one unified skill.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Generates OpenChart chart, table, graph, and sankey specs from data, and guides editorial design decisions. Use when visualizing data, selecting chart types, formatting axes, or creating data-driven graphics.
Query the OpenData API for data research and analysis. Use when fetching dataset rows, filtering, sorting, aggregating, inspecting columns, or building data pipelines against OpenData endpoints.
Generates and edits SVG logos, icons, and graphics. Use for writing path data, combining shapes, applying transforms, optimizing SVGs, and managing GPU acceleration techniques. Always uses hand-written SVG code like clean markup, never exports from design tools.
| name | frontend-design-md |
| description | Design system intelligence, cinematic scroll animations, data visualization, and SVG creation - all in one unified skill. |
| trigger | ["design","system","ui","chart","data","svg","icon","logo","parallax","scroll","animation","color","typography"] |
| allowed-tools | ["Read","Bash(python3:skills/*/scripts/*)","Bash(curl)","Glob","Grep","WebFetch"] |
A unified design skill combining 60+ design system references, cinematic animations, data visualization, and SVG creation.
| Command | Description |
|---|---|
/design analyze | Analyze project and recommend design system |
/design apply <system> | Apply specified design system (linear, vercel, etc.) |
/epic scroll | Initialize cinematic 2.5D parallax site |
/chart from <data> | Generate chart from data source |
/data query <source> | Query public datasets (FRED, etc.) |
/svg icon <name> | Create optimized SVG icon |
/svg logo <desc> | Generate geometric SVG logo |
/design systems | List available 60+ design systems |
Also activates on phrases like:
When opening any project, automatically:
/design apply <system>