npx claudepluginhub vinnie357/claude-skills --plugin uiThis 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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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