design-ui

Design & UI

Make interfaces that look intentional and premium, not template-generic. This is the single biggest quality lever in the app builder. Apply it to DOM / overlay UI — pages, chrome, HUD, menus, forms. (For a 3D game's gameplay canvas, see the building-games skill; this skill governs the DOM UI layered over it.)

Read references/ for depth (loaded on demand — don't inline it all):

• references/refined-ui.md — the full product-chrome/overlay design system.
• references/typography.md — type scale, pairing, rhythm.
• references/surfaces.md — elevation, borders, shadows, layering.
• references/animations.md — motion, easing, transitions.
• references/performance.md — keep UI smooth (60fps, no jank).

1. Design-system-first (do this before styling anything)

Define the system once, then compose from it. Never sprinkle ad-hoc values.

• Tokens in CSS (Tailwind v4 is CSS-first). Put the palette, radii, and fonts in src/styles.css under @theme as CSS variables; consume them as Tailwind utilities. One source of truth.

  @import "tailwindcss";
  @theme {
    --color-bg: #0b0b0f;      --color-surface: #16161d;
    --color-fg: #e7e7ea;      --color-muted: #a0a0ab;
    --color-primary: #14b8a6; --color-border: #26262f;
    --radius: 0.75rem;        --font-sans: "Inter", system-ui, sans-serif;
  }
  

• Use shadcn/ui components (Radix primitives + cva variants + tailwind-merge) for buttons, dialogs, dropdowns, inputs, etc. They're accessible and consistent. Generate them into src/components/ui; style via tokens, not inline hex.
• Tailwind v4 base fix — buttons need a pointer cursor. v4's Preflight makes <button> use cursor: default, which feels broken. Add this once in src/styles.css so buttons/clickable roles show a pointer:

  @layer base {
    button:not(:disabled),
    [role="button"]:not(:disabled) { cursor: pointer; }
  }
  

• Ban ad-hoc styling: no raw hex in JSX, no text-white/bg-black literals, no arbitrary values like p-[16px] or text-[13px]. If you need a value, it becomes a token or a scale step.