app-ui-design

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:

/* ❌ BROKEN — variables are NOT available to Tailwind's arbitrary value resolver */
:root {
  --card: #ffffff;
  --foreground: #0f172a;
}

// ❌ BROKEN — these classes compile but resolve to empty/broken values
className="bg-[var(--card)] text-[var(--foreground)]"

Instead, use one of these approaches:

1. Use Tailwind's built-in color palette (preferred for most apps):

   // ✅ Works — uses Tailwind's first-class utility classes
   className="bg-white text-slate-900 border-slate-200"
   className="text-indigo-500 bg-indigo-50"
   

2. Register custom tokens via @theme (only if you need custom colors):

   @import "tailwindcss";
   @theme {
     --color-brand: #6366f1;
     --color-surface: #ffffff;
   }
   

   // ✅ Works — registered via @theme
   className="bg-surface text-brand"