From frontend
Expert guidance for building with daisyUI -- component classes, theming system, color semantics, responsive patterns, drawer/modal architecture, and Tailwind CSS integration. Trigger when working with daisyUI components, adding daisyUI to a project, theming, or building UI with daisyUI class names. Also trigger on mentions of "daisyui", "daisy ui", "daisyUI components", "daisyUI themes", or daisyUI class patterns like "btn-primary", "card", "modal", "drawer". TRIGGER WHEN: working with daisyUI components, adding daisyUI to a project, theming, or building UI with daisyUI class names DO NOT TRIGGER WHEN: the task is outside the specific scope of this component.
npx claudepluginhub acaprino/alfio-claude-plugins --plugin frontendThis skill uses the workspace's default tool permissions.
Guidance for building production UIs with daisyUI. Covers component usage, theming, color system, responsive patterns, and integration with Tailwind CSS.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Guidance for building production UIs with daisyUI. Covers component usage, theming, color system, responsive patterns, and integration with Tailwind CSS.
Docs: https://daisyui.com/docs
daisyUI is a Tailwind CSS component library that provides semantic class names for UI components. Instead of writing flex items-center justify-center gap-2 rounded-lg bg-indigo-500 px-4 py-2 text-white, you write btn btn-primary. Four pillars:
btn, card, modal) instead of utility chainsnpm i -D daisyui)| Need | Route to |
|---|---|
| CSS architecture, modern CSS features, responsive images | web-designer |
| Page layout composition, grid systems, breakpoint strategy | ui-layout-designer agent |
| Animations, micro-interactions, visual polish | web-designer agent |
| UX flows, design tokens, component hierarchy | web-designer agent |
| Distinctive visual identity, avoiding generic aesthetics | frontend-design |
| shadcn/ui components (different library, Radix-based) | shadcn-ui |
This skill handles daisyUI-specific concerns: class names, theming, color system, component patterns, and configuration.
This skill contains reference patterns for the most common components. For any component's full class API -- spawn a quick-searcher agent to fetch the docs.
| Resource | URL pattern |
|---|---|
| Component docs | https://daisyui.com/components/{name}/ |
| Theme list | https://daisyui.com/docs/themes/ |
| Color system | https://daisyui.com/docs/colors/ |
| Config | https://daisyui.com/docs/config/ |
| Utilities | https://daisyui.com/docs/utilities/ |
| Theme generator | https://daisyui.com/theme-generator/ |
npm i -D daisyui@latest
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, nord, dracula;
}
| Option | Default | Purpose |
|---|---|---|
themes | light --default, dark --prefersdark | Themes to enable (all, false, or comma list) |
root | ":root" | CSS selector for variables (web components, shadow DOM) |
include | (all) | Whitelist specific components |
exclude | (empty) | Blacklist specific components |
prefix | "" | Prefix for all daisyUI classes (e.g. d-btn) |
logs | true | Console output during build |
See references/components.md for the full catalog with all class names.
| Category | Components |
|---|---|
| Actions | Button, Dropdown, FAB/Speed Dial, Modal, Swap, Theme Controller |
| Data Display | Accordion, Avatar, Badge, Card, Carousel, Chat Bubble, Collapse, Countdown, Diff, Hover 3D Card, Hover Gallery, Kbd, List, Stat, Status, Table, Text Rotate, Timeline |
| Navigation | Breadcrumbs, Dock, Link, Menu, Navbar, Pagination, Steps, Tabs |
| Feedback | Alert, Loading, Progress, Radial Progress, Skeleton, Toast, Tooltip |
| Data Input | Calendar, Checkbox, Fieldset, File Input, Filter, Label, Radio, Range, Rating, Select, Text Input, Textarea, Toggle, Validator |
| Layout | Divider, Drawer, Footer, Hero, Indicator, Join, Mask, Stack |
| Mockup | Browser, Code, Phone, Window |
All daisyUI components follow a consistent naming convention:
{component} -- base class (required)
{component}-{variant} -- style variant
{component}-{color} -- semantic color
{component}-{size} -- size modifier (xs, sm, md, lg, xl)
{component}-{state} -- state modifier (active, disabled, open)
Example with Button:
<button class="btn">Default</button>
<button class="btn btn-primary">Primary color</button>
<button class="btn btn-outline btn-sm">Small outline</button>
<button class="btn btn-primary btn-soft btn-lg">Large soft primary</button>
Style variants available on most components: {component}-outline, {component}-ghost, {component}-soft, {component}-dash.
daisyUI uses semantic color names -- not fixed hex values. Colors change with themes automatically.
| Color | Purpose | Content pair |
|---|---|---|
primary | Main brand actions | primary-content |
secondary | Supporting actions | secondary-content |
accent | Highlights, accents | accent-content |
neutral | Unsaturated UI elements | neutral-content |
base-100 | Page background | base-content |
base-200 | Slightly elevated surface | -- |
base-300 | Most elevated surface | -- |
info | Informational | info-content |
success | Positive feedback | success-content |
warning | Caution | warning-content |
error | Destructive/error | error-content |
Colors work with all Tailwind utilities: bg-primary, text-primary-content, border-accent, ring-error, from-primary/50.
light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk.
<!-- Page-level -->
<html data-theme="nord">
<!-- Element-level (nested themes supported) -->
<div data-theme="dark">
<div data-theme="light"><!-- light inside dark --></div>
</div>
@plugin "daisyui/theme" {
name: "mytheme";
default: true;
color-scheme: light;
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.02 240);
--color-base-300: oklch(90% 0.02 240);
--color-base-content: oklch(20% 0.02 240);
--color-primary: oklch(55% 0.3 260);
--color-primary-content: oklch(98% 0.01 260);
--color-secondary: oklch(65% 0.15 330);
--color-secondary-content: oklch(98% 0.01 330);
--color-accent: oklch(70% 0.2 180);
--color-accent-content: oklch(15% 0.02 180);
--color-neutral: oklch(40% 0.02 240);
--color-neutral-content: oklch(95% 0.01 240);
--color-info: oklch(65% 0.2 250);
--color-success: oklch(65% 0.2 150);
--color-warning: oklch(75% 0.15 80);
--color-error: oklch(60% 0.25 25);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
| Variable | Controls | Example |
|---|---|---|
--color-{name} | All semantic colors | --color-primary |
--radius-box | Large containers (card, modal, alert) | 1rem |
--radius-field | Medium elements (button, input, tab) | 0.5rem |
--radius-selector | Small elements (checkbox, toggle, badge) | 1rem |
--size-selector | Scale of small elements | 0.25rem |
--size-field | Scale of medium elements | 0.25rem |
--border | Default border width | 1px |
--depth | Shadow/depth intensity (0 or 1) | 1 |
--noise | Noise texture overlay (0 or 1) | 0 |
| Class | Variable | Use for |
|---|---|---|
rounded-box | --radius-box | Cards, modals, alerts |
rounded-field | --radius-field | Buttons, inputs, tabs |
rounded-selector | --radius-selector | Checkboxes, toggles, badges |
<button class="btn" onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold">Title</h3>
<p class="py-4">Content here</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<div class="drawer lg:drawer-open">
<input id="sidebar" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content -->
<label for="sidebar" class="btn btn-ghost lg:hidden">Menu</label>
</div>
<div class="drawer-side">
<label for="sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 min-h-full w-80 p-4">
<li><a>Home</a></li>
<li><a>About</a></li>
</ul>
</div>
</div>
<div class="card bg-base-100 w-96 shadow-xl">
<figure><img src="photo.jpg" alt="Photo" /></figure>
<div class="card-body">
<h2 class="card-title">Title</h2>
<p>Description text.</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">Account</legend>
<label class="label">Email</label>
<input type="email" class="input input-bordered w-full" placeholder="you@example.com" />
<label class="label">Password</label>
<input type="password" class="input input-bordered w-full" />
<button class="btn btn-primary mt-4">Sign In</button>
</fieldset>
See references/best-practices.md for detailed patterns. Key points:
btn-primary not bg-blue-500; themes change colors automaticallydata-theme -- for theme switching, not Tailwind dark: (unless you need both)<dialog> -- for modals over checkbox method; better a11y and ESC supportlg:drawer-open for desktop-visible, mobile-toggleable sidebar@utility directivejoin to visually connect related elements (button groups, input+button)daisyUI is pure CSS -- works identically in React, Vue, Svelte, Solid, HTMX, or plain HTML. No framework-specific wrappers needed.
export function Alert({ children, type = "info" }) {
return (
<div className={`alert alert-${type}`}>
<span>{children}</span>
</div>
)
}
function ThemeSwitcher() {
const [theme, setTheme] = useState("light")
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme)
}, [theme])
return (
<select className="select select-bordered" value={theme}
onChange={(e) => setTheme(e.target.value)}>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="nord">Nord</option>
</select>
)
}
<input type="checkbox" value="dark" class="toggle theme-controller" />
The theme-controller class makes any checkbox/radio automatically toggle themes.
btn-outline, btn-ghost, btn-soft)@utility btn {
@apply rounded-full;
}
See references/migration-v5.md for the full migration guide including:
card-bordered -> card-border, btm-nav -> dock, etc.)form-control, input-group, -bordered on inputs)xl size, soft, dash styles on all components)See references/best-practices.md for expanded discussion:
bg-blue-500) instead of semantic colors -- breaks themingbtn before btn-primary) -- no styles applied<dialog> or framework's modallight and dark available by defaultdark: variants instead of data-theme -- themes are more than light/dark