| name | design-expert |
| description | UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs. |
| autoInvoke | false |
| priority | medium |
| triggers | ["design component","design system","component library","Material UI","Tailwind","shadcn","responsive layout"] |
| user-invocable | false |
AI-consumed reference. Optimized for Claude to read during execution.
Human-readable explanation: see docs/architecture/HIERARCHICAL_PLANNING.md
or docs/getting-started/ depending on topic.
Design Expert
When to Use
Component design, design system selection/setup, responsive layouts, Figma analysis.
Principles
principles[4]{principle}:
Atomic design: Atoms → Molecules → Organisms → Templates → Pages
Mobile-first: design for smallest then enhance
Design tokens: colors/spacing/typography as variables not magic values
Consistency: one library per project — don't mix
Design System Selection
selection[4]{use_case,recommendation}:
Enterprise,"Ant Design, MUI, Mantine"
Modern Web,"Tailwind + shadcn/ui"
Mobile (RN),NativeWind
Prototyping,"Bootstrap, Tailwind"
Auto-Detection
Detect from package.json: @mui/material → MUI, antd → Ant Design, tailwindcss → Tailwind, @chakra-ui/react → Chakra, nativewind → NativeWind, @mantine/core → Mantine.
Implementation
Use Context7 for current library docs. Add "use context7" to fetch version-specific API.
Responsive Breakpoints
Mobile: <768px | Tablet: 768-1024px | Desktop: >1024px
