design-expert

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