Claude UI/UX Pro Max skill: 10 production interfaces in one prompt

The prompt

Use the ui-ux-pro-max skill. Build a landing-page hero for an AI customer-support startup called Threadhaven. Stack: Next.js 15 + Tailwind + shadcn/ui. Style: aurora UI (NOT generic teal-on-navy AI slop). Pick a palette aligned to fintech-trust + creative-warmth, and a font pairing where the heading is a contemporary geometric sans. Render the section to app/(marketing)/page.tsx with a single <Hero /> component, an <Eyebrow> badge, two <Button> CTAs (primary + ghost), and a soft aurora gradient backdrop. Persist the resulting design system to .claude/design-system.json so the next page reuses it.

What slides.md looks like

// app/(marketing)/page.tsx
export default function Page() {
  return (
    <section className="relative isolate overflow-hidden bg-[radial-gradient(ellipse_at_top,#1e1b4b_0%,#020617_70%)] px-6 py-24">
      <Badge variant="outline" className="border-fuchsia-400/30 text-fuchsia-200">New · Auto-triage v3</Badge>
      <h1 className="mt-6 max-w-3xl font-display text-5xl leading-[1.05] tracking-tight text-white">
        Stop drowning in support tickets.
      </h1>
      <p className="mt-5 max-w-xl text-lg text-slate-300">Threadhaven reads every conversation, drafts the reply, and routes the rest.</p>
      <div className="mt-9 flex gap-3"><Button size="lg">Start free</Button><Button size="lg" variant="ghost">Watch the 2-min demo</Button></div>
    </section>
  );
}

Pairs with

The prompt

ui-ux-pro-max skill: design and implement a pricing section for Threadhaven. Three tiers (Starter $29, Team $99, Scale $299). Include a monthly/annual toggle (annual = 20% off), a 12-row feature matrix below the cards, a 'most popular' ribbon on the middle card, and accessible focus rings on every interactive element (WCAG AA, 4.5:1 contrast minimum). Reuse the design tokens persisted to .claude/design-system.json. Stack: Next.js + Tailwind + shadcn. Output as components/pricing/PricingSection.tsx.

What slides.md looks like

// components/pricing/PricingSection.tsx (excerpt)
const tiers = [
  { name: "Starter", price: { monthly: 29, annual: 23 }, features: [...] },
  { name: "Team", price: { monthly: 99, annual: 79 }, features: [...], popular: true },
  { name: "Scale", price: { monthly: 299, annual: 239 }, features: [...] },
];
<RadioGroup value={cycle} onValueChange={setCycle} className="inline-flex rounded-full border bg-card p-1">
  <RadioGroupItem value="monthly" id="m" className="px-4 py-1.5 data-[state=checked]:bg-primary" />
  <RadioGroupItem value="annual"  id="a" className="px-4 py-1.5 data-[state=checked]:bg-primary" />
</RadioGroup>

Pairs with

The prompt

ui-ux-pro-max: build a dashboard layout for an analytics tool. Three regions: (1) collapsible sidebar with logo, six nav items (Overview, Customers, Revenue, Funnels, Reports, Settings), and a user menu pinned to the bottom; (2) main area with four stat cards across the top + a Recharts line chart below; (3) right-rail activity feed with live-status dots. Style: minimalism, dark mode default. Stack: Next.js + Tailwind + shadcn. Use a 25-chart-types domain search to pick the cleanest line-chart with comparison overlay.

What slides.md looks like

// app/dashboard/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid h-dvh grid-cols-[16rem_minmax(0,1fr)_22rem] bg-background">
      <Sidebar />
      <main className="overflow-y-auto p-8">{children}</main>
      <ActivityFeed />
    </div>
  );
}
// components/dashboard/StatCard.tsx (excerpt)
<Card><CardHeader><CardDescription>MRR</CardDescription><CardTitle className="text-3xl tabular-nums">$48,210</CardTitle></CardHeader><CardFooter><Badge variant="outline" className="text-emerald-500">+12.4%</Badge></CardFooter></Card>

Pairs with

The prompt

ui-ux-pro-max: implement a sign-up form (email, password, name, company, role) with: real-time inline validation, distinct empty / focus / error / disabled states for every field, a primary submit button with a loading spinner state, and a sonner toast on success. Use React Hook Form + Zod. WCAG AA contrast, 44 px minimum touch targets, ARIA-described errors. Render to app/sign-up/page.tsx. Stack: Next.js + Tailwind + shadcn.

What slides.md looks like

// app/sign-up/page.tsx (excerpt)
const schema = z.object({
  email: z.string().email("Use a valid work email"),
  password: z.string().min(10, "At least 10 characters"),
  name: z.string().min(2),
  company: z.string().optional(),
  role: z.enum(["founder", "engineer", "designer", "other"]),
});
const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema), mode: "onBlur" });
<Form {...form}><form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">{/* FormField × 5 */}
  <Button type="submit" disabled={form.formState.isSubmitting}>{form.formState.isSubmitting ? <Loader2 className="animate-spin" /> : "Create account"}</Button>
</form></Form>

Pairs with

The prompt

ui-ux-pro-max: build a destructive-confirmation modal for deleting a customer record. Use Radix Dialog under shadcn's <Dialog>. Trap focus inside the panel, autofocus the secondary <Cancel> button (NOT the destructive one — typing through a modal should never confirm a delete), close on ESC, close on outside click, and mark the destructive button as <Button variant="destructive">. Render an inline <Alert variant="warning"> above the buttons explaining the action is irreversible. Stack: Next.js + Tailwind + shadcn.

What slides.md looks like

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent className="sm:max-w-md" onEscapeKeyDown={() => setOpen(false)}>
    <DialogHeader>
      <DialogTitle>Delete customer?</DialogTitle>
      <DialogDescription>This permanently removes Acme Inc. and all 1,284 conversations.</DialogDescription>
    </DialogHeader>
    <Alert variant="warning"><AlertTriangle className="h-4 w-4" /><AlertTitle>This cannot be undone</AlertTitle></Alert>
    <DialogFooter className="gap-2 sm:gap-2">
      <Button ref={cancelRef} variant="secondary" onClick={() => setOpen(false)} autoFocus>Cancel</Button>
      <Button variant="destructive" onClick={handleDelete}>Delete forever</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Pairs with

The prompt

ui-ux-pro-max: build a top navigation that renders as a horizontal nav above md and as a slide-from-left drawer below md. Hamburger button is a 44 × 44 px touch target, ARIA-controls the drawer, and toggles aria-expanded. Drawer traps focus while open, closes on ESC and on any link click, and animates in 200 ms ease-out. Use shadcn <Sheet> as the underlying primitive. Render the nav with five links (Product, Pricing, Customers, Docs, Login) and a primary CTA. Stack: Next.js + Tailwind.

What slides.md looks like

<Sheet open={open} onOpenChange={setOpen}>
  <SheetTrigger asChild>
    <Button size="icon" variant="ghost" aria-label="Open menu" className="md:hidden h-11 w-11">
      <Menu className="h-5 w-5" />
    </Button>
  </SheetTrigger>
  <SheetContent side="left" className="w-72 p-0">
    <nav className="flex flex-col">
      {links.map((l) => <Link key={l.href} href={l.href} onClick={() => setOpen(false)} className="px-6 py-4 text-base font-medium hover:bg-accent">{l.label}</Link>)}
    </nav>
  </SheetContent>
</Sheet>

Pairs with

The prompt

ui-ux-pro-max: render two state pages for a CRM. (1) Empty state for /customers when the team has zero records: friendly illustration, a clear primary CTA ("Import from CSV"), a secondary ("Add your first manually"), and a microcopy line that names the next action. (2) 500 error page: keep the brand voice, name the failure ("Our database is catching its breath"), offer one CTA ("Try again"), and a quiet link to status.threadhaven.com. NO 'Oops!'. NO 'Something went wrong'. Stack: Next.js + Tailwind + shadcn.

What slides.md looks like

// app/customers/empty.tsx
export function EmptyCustomers() {
  return (
    <div className="mx-auto max-w-md py-24 text-center">
      <Illustration className="mx-auto h-32 w-32 text-muted-foreground/30" />
      <h2 className="mt-6 text-xl font-semibold">No customers yet</h2>
      <p className="mt-2 text-sm text-muted-foreground">Drop a CSV or add your first one — the dashboard fills out from there.</p>
      <div className="mt-6 flex justify-center gap-2"><Button>Import from CSV</Button><Button variant="ghost">Add manually</Button></div>
    </div>
  );
}

Pairs with

The prompt

ui-ux-pro-max: build a customers data table. Columns: name, email, plan, MRR, last-active, status. Wire it to TanStack Table v8 with: per-column sort, a multi-select facet filter on plan and status, server-side pagination (10 / 25 / 50 per page), a sticky header that stays pinned on scroll, and row hover states. Include a row-action menu (View, Edit, Delete) on the rightmost column. Keyboard: arrow keys to navigate cells, Enter to open the row. Stack: Next.js + shadcn (Table, DropdownMenu, Select).

What slides.md looks like

// components/customers/CustomersTable.tsx (excerpt)
const table = useReactTable({
  data,
  columns,
  state: { sorting, columnFilters, pagination },
  onSortingChange: setSorting,
  onColumnFiltersChange: setColumnFilters,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  manualPagination: true,
  pageCount: data.totalPages,
});
<Table><TableHeader className="sticky top-0 bg-card"><TableRow>{table.getHeaderGroups()[0].headers.map(h => <TableHead key={h.id} onClick={h.column.getToggleSortingHandler()}>{flexRender(h.column.columnDef.header, h.getContext())}</TableHead>)}</TableRow></TableHeader>{/* ... */}</Table>

Pairs with

The prompt

ui-ux-pro-max: build a 4-step onboarding wizard. Steps: (1) Welcome (name, role, team-size), (2) Workspace (workspace name, slug, region), (3) Integrations (Slack, GitHub, Linear toggles with OAuth-stub), (4) Finish (recap of choices + a primary 'Go to dashboard' CTA). Include a horizontal progress rail showing 1/4 → 4/4 with completed-state checkmarks, Back/Next navigation, and per-step Zod validation that disables Next until the form is valid. Persist partial state to localStorage so a refresh does not lose progress. Stack: Next.js + Tailwind + shadcn.

What slides.md looks like

// app/onboarding/page.tsx (excerpt)
const steps = [WelcomeStep, WorkspaceStep, IntegrationsStep, FinishStep];
const [step, setStep] = useState(0);
<div className="mx-auto max-w-xl">
  <ProgressRail current={step} total={steps.length} />
  <Card className="mt-8 p-8">{React.createElement(steps[step], { onNext: () => setStep(s => s + 1) })}</Card>
  <div className="mt-6 flex justify-between">
    <Button variant="ghost" onClick={() => setStep(s => Math.max(0, s - 1))} disabled={step === 0}>Back</Button>
    <Button onClick={() => setStep(s => s + 1)} disabled={!form.formState.isValid}>{step === steps.length - 1 ? "Finish" : "Next"}</Button>
  </div>
</div>

Pairs with

The prompt

ui-ux-pro-max: build /settings as a tabbed page. Five tabs: Profile, Billing, Team, Integrations, Danger Zone. Tabs deep-link via search params (?tab=billing) so URLs are shareable. Reuse the form pattern from the sign-up page (React Hook Form + Zod + shadcn primitives). The Danger Zone tab requires a confirmation modal (use case 5's pattern) before any destructive action runs. Style: minimalism, locked to the persisted design system. Stack: Next.js + Tailwind + shadcn.

What slides.md looks like

// app/settings/page.tsx
export default function Settings({ searchParams }: { searchParams: { tab?: string } }) {
  const tab = searchParams.tab ?? "profile";
  return (
    <div className="mx-auto max-w-4xl py-12">
      <h1 className="text-2xl font-semibold">Settings</h1>
      <Tabs value={tab} className="mt-8">
        <TabsList><TabsTrigger value="profile" asChild><Link href="?tab=profile">Profile</Link></TabsTrigger>{/* ... */}<TabsTrigger value="danger" className="data-[state=active]:bg-destructive/10">Danger Zone</TabsTrigger></TabsList>
        <TabsContent value="profile"><ProfileForm /></TabsContent>
        {/* ... */}
      </Tabs>
    </div>
  );
}

Pairs with