npx claudepluginhub vinnie357/claude-skills --plugin alliumThis skill uses the workspace's default tool permissions.
Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.
Activate when:
daisyUI is a Tailwind CSS component library providing:
Add daisyUI to your project:
npm install -D daisyui@latest
Configure tailwind.config.js:
module.exports = {
plugins: [require("daisyui")],
}
For detailed installation options and CDN usage, see references/installation.md.
daisyUI provides components across these categories:
For component-specific guidance, consult the appropriate reference file.
<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="image.jpg" alt="Image" /></figure>
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Card description text</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Action</button>
</div>
</div>
</div>
<button class="btn" onclick="my_modal.showModal()">Open Modal</button>
<dialog id="my_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Modal Title</h3>
<p class="py-4">Modal content here</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
Set theme via HTML attribute:
<html data-theme="cupcake">
Available themes: 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
<select class="select" data-choose-theme>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="cupcake">Cupcake</option>
</select>
For advanced theming and customization, see references/theming.md.
daisyUI components work with Tailwind's responsive prefixes:
<button class="btn btn-sm md:btn-md lg:btn-lg">
Responsive Button
</button>
<div class="card w-full md:w-96">
<!-- Responsive card -->
</div>
references/installation.mdreferences/components.mdreferences/theming.mdreferences/layouts.mdreferences/forms.mdreferences/patterns.mddaisyUI semantic classes combine with Tailwind utilities:
<!-- daisyUI component + Tailwind utilities -->
<button class="btn btn-primary shadow-lg hover:shadow-xl transition-all">
Enhanced Button
</button>
<div class="card bg-base-100 border-2 border-primary rounded-lg p-4">
<!-- Card with custom styling -->
</div>
btn-{size} modifiers: btn-xs, btn-sm, btn-md, btn-lgbtn-outline for outlined button variantsbadge component for status indicatorsmodal with modal-backdrop for better UXdrawer for mobile navigation patternsstats component for dashboard metricsloading class on buttons for async operations