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
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
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
