What problem does it solve? Building app interfaces often results in generic, inconsistent designs with broken styling—especially common Tailwind CSS v4 pitfalls like unresolved CSS variables in arbitrary values and global resets that silently override utility classes. This Skill provides concrete design rules so generated app UIs are consistent, accessible, and visually distinctive. ## Core Features & Use Cases - Tailwind CSS v4 Guidance: Correct patterns for @theme tokens, @import "tailwindcss", and avoiding broken bg-[var(--name)] arbitrary values or global * resets. - shadcn/ui Component Patterns: Standard usage of Button, Card, Dialog, Form, Skeleton, and cn() with react-hook-form, zod validation, sonner toasts, and Lucide icons. - UX & Accessibility Rules: Loading/empty states, cursor and feedback conventions, dark mode handling, and Radix-based accessibility practices. - Use Case: When generating a client portal dashboard page, apply this Skill to produce a responsive layout with proper text hierarchy, shadcn/ui form components with inline validation, and consistent theming that works in both light and dark modes. ## Quick Start Use the app-ui-design skill to build a responsive settings page with shadcn/ui components and Tailwind v4 theming.
