with one click
shadcn-customization
Shadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling.
Menu
Shadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling.
Multi-agent team workflow for implementing tickets with peer-to-peer communication inside a single shared team. Used by chat-orchestrator for COMPLEX requests only (planner → wave → teardown). Single source of truth for cross-agent messaging.
When to write e2e tests, where to put them, and how to verify them. Apply to any task touching UI, filters, forms, or interactions.
Playwright E2E testing patterns — web-first assertions, user-visible locators, network interception, fixtures, authentication, and parallel execution. Use when building or reviewing E2E tests with Playwright, when setting up browser testing for a web app, or when migrating from Cypress or Selenium.
Domain-by-domain interview to produce $CLAUDE_PROJECT_DIR/docs/project-context.json. Invoked once by the orchestrator; the orchestrator then conducts all turns directly using Read/Write/Edit — no agent dispatching.
Generate Supabase SQL migrations at deploy time from the session branch diff. Used by simple-developer in the deploy-time migration round only.
Rebrand Atomic CRM — change the application logo (the wordmark in the header and on the login/signup pages) and/or the title/name. Use when the user wants to change, swap, update, or rebrand the CRM logo or title. Handles the two light/dark-mode logo variants, the three places the title is hardcoded, the config that points at them, and — optionally — the browser favicon and PWA app icons.
| name | shadcn-customization |
| description | Shadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling. |
Components reference semantic CSS variable tokens. Change the variables to change every component.
:root (light) and .dark (dark mode).bg-primary, text-muted-foreground, etc.Every color follows the name / name-foreground convention. The base variable is for backgrounds, -foreground is for text/icons on that background.
| Variable | Purpose |
|---|---|
--background / --foreground | Page background and default text |
--card / --card-foreground | Card surfaces |
--primary / --primary-foreground | Primary buttons and actions |
--secondary / --secondary-foreground | Secondary actions |
--muted / --muted-foreground | Muted/disabled states |
--accent / --accent-foreground | Hover and accent states |
--destructive / --destructive-foreground | Error and destructive actions |
--border | Default border color |
--input | Form input borders |
--ring | Focus ring color |
--chart-1 through --chart-5 | Chart/data visualization |
--sidebar-* | Sidebar-specific colors |
--surface / --surface-foreground | Secondary surface |
Colors use OKLCH: --primary: oklch(0.205 0 0) where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
Class-based toggle via .dark on the root element. Atomic CRM wires this
through its own ThemeProvider at src/components/admin/theme-provider.tsx,
which is already mounted from src/components/admin/admin.tsx. To customize
the palette, pass lightTheme / darkTheme props to the <CRM> component
(see src/App.tsx).
# Apply a preset from ui.shadcn.com.
npx shadcn@latest apply --preset a2r6bw
# Positional shorthand also works.
npx shadcn@latest apply a2r6bw
# Switch to a named preset, overwrite existing components.
npx shadcn@latest apply --preset nova
# Preserve existing components instead.
npx shadcn@latest init --preset nova --force --no-reinstall
# Use a custom theme URL.
npx shadcn@latest apply --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..."
Or edit CSS variables directly in globals.css.
Add variables to the file at tailwindCssFile from npx shadcn@latest info (typically globals.css). Never create a new CSS file for this.
/* 1. Define in the global CSS file. */
:root {
--warning: oklch(0.84 0.16 84);
--warning-foreground: oklch(0.28 0.07 46);
}
.dark {
--warning: oklch(0.41 0.11 46);
--warning-foreground: oklch(0.99 0.02 95);
}
/* 2. Register with Tailwind v4 (@theme inline). */
@theme inline {
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
}
// 3. Use in components.
<div className="bg-warning text-warning-foreground">Warning</div>
--radius controls border radius globally. Components derive values from it (rounded-lg = var(--radius), rounded-md = calc(var(--radius) - 2px)).
Prefer these approaches in order:
<Button variant="outline" size="sm">Click</Button>
className<Card className="mx-auto max-w-md">...</Card>
Edit the component source to add a variant via cva:
// components/ui/button.tsx
warning: "bg-warning text-warning-foreground hover:bg-warning/90",
Compose shadcn/ui primitives into higher-level components:
export function ConfirmDialog({ title, description, onConfirm, children }) {
return (
<AlertDialog>
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{title}</AlertDialogTitle>
<AlertDialogDescription>{description}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
npx shadcn@latest add button --diff
npx shadcn@latest add button --dry-run # see all affected files
npx shadcn@latest add button --diff button.tsx # diff for a specific file