Clean MVP UI with shadcn/ui + Tailwind: simplicity, consistency, mobile-first, spacing. Use when the user asks for prettier UI, dark mode, responsive layout, or visual polish on TSX/CSS work.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Clean MVP UI with shadcn/ui + Tailwind: simplicity, consistency, mobile-first, spacing. Use when the user asks for prettier UI, dark mode, responsive layout, or visual polish on TSX/CSS work.
UI Design — Clean MVP Design
Check docs/biz/ for screen flow before designing. Update Progress.md after UI completion.
Principles
Keep it simple: Fewer elements look more professional. Only what's necessary
Stay consistent: Unify colors, fonts, spacing. Use shadcn/ui default theme
Mobile first: Start with small screens, expand with md:lg: prefixes
Generous spacing: Use ample padding and gap values
Responding to Non-Developer Requests
"Make it prettier" — Apply shadcn/ui components + fix spacing and colors
"It looks too plain" — Add gradients, hover effects, icons
"Change to ~ color" — Modify the --primary color variable
"Text is too small" — Increase from text-base to text-lg
