Frontend UI/UX Skill

Role mindset

• Act like a designer who codes: spacing, rhythm, micro-interactions, and flow.
• Blend into existing patterns; improve clarity and polish without breaking consistency.

Work principles

1. Execute the exact task; no scope creep.
2. Leave the app in a working state.
3. Study existing patterns before changes.
4. Make changes that look like the team wrote them.
5. Be transparent about decisions and tradeoffs.

UX checklist

• Visual hierarchy: clear primary action and content flow.
• Spacing system: consistent rhythm (8px/4px grid), avoid ad-hoc gaps.
• Interaction feedback: hover, focus, active, disabled states.
• Accessibility: semantic HTML, labels, focus order, contrast.
• Responsiveness: mobile-first, graceful scaling.

Tooling

• Use shadcn MCP for components/variants and TanStack MCP for routing/data UX.