app-ui-designlisted

# App UI Design This skill guides UI/UX in **generated apps** (Fusebase Apps). Use **shadcn/ui** for all UI. Apply a clear design direction and avoid generic AI aesthetics. --- ## Design philosophy **Clarity over decoration.** Every visual choice supports hierarchy and scannability. Prefer one bold aesthetic direction (minimal, warm, editorial, etc.) and execute it consistently. - **Purpose first**: What does the screen do? Who uses it? - **Tone**: Choose one direction (e.g. minimal, warm/SaaS, editorial, utilitarian) and stick to it. - **Differentiation**: Avoid default "AI" look: no Inter/Roboto-only, no purple gradients on white, no same-as-everyone layouts. Vary fonts, palette, and density per context. --- ## Visual identity ### Tailwind CSS v4 Apps use **Tailwind CSS v4** (via `@tailwindcss/postcss`). Key differences from v3: - **Import**: Use `@import "tailwindcss"` in `globals.css` (not `@tailwind base/components/utilities`). - **No `tailwind.config.js`**: Configuration is CSS-first. Use `@theme` in CSS to define custom tokens. - **Content detection is automatic**: Tailwind v4 scans project files automatically. If needed, use `@source "../path/**/*.tsx"` to add extra directories. **⚠️ CRITICAL — CSS variables in arbitrary values:** Do **NOT** define raw `:root` CSS variables and reference them via arbitrary value syntax. This is the most common Tailwind v4 pitfall: ```css /* ❌ BROKEN — variables are NOT available to Tailwind's arbitrary value resolver */ :