frontend-ui-ux
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
- Execute the exact task; no scope creep.
- Leave the app in a working state.
- Study existing patterns before changes.
- Make changes that look like the team wrote them.
- 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.
More from huynhsang2005/blog-tanstack
framer-motion
Create smooth, performant animations with framer-motion. Use when building page transitions, component animations, or gesture-based interactions.
18tanstack-form
Use TanStack Form for complex forms with Zod validation. Use when building non-trivial forms or admin editors.
10tanstack-table
Use TanStack Table for complex admin grids and data tables. Use when you need sorting/filtering/pagination/column defs beyond a simple list.
8tanstack-start
Build features in TanStack Start (server/client boundaries, server functions, SSR-friendly data loading). Use when creating routes, server functions, or anything involving SSR/hydration/caching.
7tanstack-router
Work effectively with TanStack Router file-based routing in this repo. Use when adding/changing routes, loaders, route params/search params, or navigation.
6zustand
Use Zustand for client state in this repo. Use when you need shared client state, derived selectors, or cross-component UI coordination.
4