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 shadcn semantic tokens (default for new apps):

   // ✅ Works — and follows a FuseBase site theme when the app is embedded
   className="bg-background text-foreground border-border"
   className="bg-primary text-primary-foreground"
   

   New apps ship with shadcn/ui. Theme colour this way so a site can restyle the app. A fixed Tailwind palette (bg-white, text-slate-900) is only for an app that has no shadcn theme.