frontend-ui-ux

- Act like a designer who codes: spacing, rhythm, micro-interactions, and flow.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "frontend-ui-ux" with this command: npx skills add huynhsang2005/blog-tanstack/huynhsang2005-blog-tanstack-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.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Coding

frontend-code-review

No summary provided by upstream source.

Repository SourceNeeds Review
-3
huynhsang2005
Coding

feature-dev

No summary provided by upstream source.

Repository SourceNeeds Review
-3
huynhsang2005
Coding

chrome-devtools-mcp

No summary provided by upstream source.

Repository SourceNeeds Review
-3
huynhsang2005