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.
Instalación
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
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