| 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"] |
Frontend Design MD
A unified design skill combining 60+ design system references, cinematic animations, data visualization, and SVG creation.
Available Commands
| 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 |
Natural Language Triggers
Also activates on phrases like:
- "Apply Linear design system"
- "Build epic scroll site"
- "Create chart from this data"
- "Get CPI data from FRED"
- "Make a search icon SVG"
- "Design a geometric logo"
Auto-Detection
When opening any project, automatically:
- Detect project category (saas, content, creative, enterprise)
- Extract existing color/font tokens
- Recommend best-matching design system
- Offer to apply with
/design apply <system>
