Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

daisyui — Claude skill: Tailwind CSS components

This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add saadeghi/daisyui --skill daisyui -a claude-code
Open on GitHub

What daisyui does

daisyUI 5 is a CSS library for Tailwind CSS 4. It provides class names for common UI parts, semantic colors and themes. The skill puts that knowledge where the agent can reach it: before writing HTML or JSX, it reads the relevant guide and pulls classes from there.

The skill is a set of markdown files. Separate guides cover installation, class usage, theme and prefix configuration, and colors. Then there is the component catalog: accordion, alert, button, card, carousel, chat, drawer, dropdown, modal, navbar, table, tabs and many more. A discovery protocol tells the agent to compare several candidate components and read their guides before picking one, matching on meaning rather than on the exact words in your request.

Worth installing if your project already runs Tailwind and you ask an agent to build UI often. The markup comes out consistent, with no made-up classes. If there is no Tailwind in the project, the skill will just confuse the agent — sort out Tailwind first.

What it helps with

  • build a card or modal from ready daisyUI classes
  • pick a component by meaning rather than by name
  • set up themes and semantic colors in Tailwind CSS 4
  • get HTML or JSX without invented class names
  • compare several components before choosing one

Example prompts for the agent

  • build a login page with daisyUI
  • rewrite this JSX using daisyUI components
  • configure a daisyUI theme for the project

How to install daisyui

1Skills CLI (Vercel)

npx skills add saadeghi/daisyui --skill daisyui -a claude-code

2Manually: put the files in place

~/.claude/skills/daisyui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/daisyui/

Similar

animation-performance emilkowalski A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. Claude Code CX Codex Cursor +1 34,700installs gsap-utils greensock This skill guides an agent through gsap.utils for ranges, random values, snapping, and collections. Use it when building GSAP animations. Claude Code CX Codex Cursor +1 64,700installs gsap-frameworks greensock Official GSAP skill for Vue, Nuxt, Svelte and SvelteKit. Tells the agent where to create animations and how to clean them up on unmount. Claude Code CX Codex Cursor +1 62,000installs next-partial-prefetching-adoption vercel Adopts Partial Prefetching in a Next.js app and checks whether prefetched UI survives the change. Use it when moving routes to the new prefetch model. Claude Code CX Codex Cursor +1 9,200installs remotion official google-labs-code Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen. Claude Code CX Codex Cursor +1 41,300installs anatomy wheresryan22 Builds detailed interactive isometric SVG figures that explain technical ideas as physical machines. Useful for landing pages and docs. Claude Code CX Codex Cursor +1 21,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about daisyui

How do I install daisyui in Claude?

Run npx skills add saadeghi/daisyui --skill daisyui -a claude-code. The skill file lands at ~/.claude/skills/daisyui/SKILL.md.

What does the daisyui skill do?

It gives the agent a reference for daisyUI 5 components, colors and themes, so generated markup uses the library's classes. The agent reads the matching guide before writing HTML or JSX.

What do I need for the skill to work?

A project on Tailwind CSS 4, since daisyUI 5 sits on top of it. If the library is not installed yet, the agent follows the install guide first.

Source text

SKILL.md · MIT 
---
name: daisyui
description: Official daisyUI component-library skill for Tailwind CSS. When you write HTML or JSX code, you must use it. Even if the user does not request it, use it.
metadata:
  version: 5.7.x
  source: https://daisyui.com/SKILL.md
---

# daisyUI 5
daisyUI 5 is a CSS library for Tailwind CSS 4. It supplies class names for common UI components, semantic colors, and themes.

## When to use this skill

- Use this skill each time you write HTML or JSX code.
- Use this skill for all Tailwind CSS UI work.
- If the user uses one of these terms or requests related work, use this skill:
  daisyUI, component, UI, Tailwind, layout, template, theme, color, design
- Even if the user does not request this skill, use it.

## References that you must read

| Task | Guide | Note |
|------|-------|------|
Install daisyUI | [./install/SKILL.md](./install/SKILL.md) | If the project does not have daisyUI, use this guide.
Use daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md) | You must read this guide before you use daisyUI class names in code.
Configure daisyUI | [./config/SKILL.md](./config/SKILL.md) | Read this guide to configure themes, prefixes, logs, or other options. You do not need it for basic use.
daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md) | You must read this guide before you use daisyUI colors in code.
daisyUI components | [./components/](./components/) | You must read the applicable component guides before you use daisyUI components. Read more than one candidate guide before you select a component.

## List of components

- [accordion](./components/accordion.md)
- [aura](./components/aura.md)
- [alert](./components/alert.md)
- [avatar](./components/avatar.md)
- [badge](./components/badge.md)
- [breadcrumbs](./components/breadcrumbs.md)
- [button](./components/button.md)
- [calendar](./components/calendar.md)
- [card](./components/card.md)
- [carousel](./components/carousel.md)
- [chat](./components/chat.md)
- [checkbox](./components/checkbox.md)
- [collapse](./components/collapse.md)
- [countdown](./components/countdown.md)
- [diff](./components/diff.md)
- [divider](./components/divider.md)
- [dock (app bar)](./components/dock.md)
- [drawer (sidebar)](./components/drawer.md)
- [dropdown](./components/dropdown.md)
- [FAB](./components/fab.md)
- [fieldset](./components/fieldset.md)
- [file-input](./components/file-input.md)
- [filter](./components/filter.md)
- [footer](./components/footer.md)
- [hero](./components/hero.md)
- [hover-3d](./components/hover-3d.md)
- [hover-gallery](./components/hover-gallery.md)
- [indicator](./components/indicator.md)
- [input](./components/input.md)
- [join (group)](./components/join.md)
- [kbd](./components/kbd.md)
- [label](./components/label.md)
- [link](./components/link.md)
- [list](./components/list.md)
- [loading](./components/loading.md)
- [mask](./components/mask.md)
- [megamenu](./components/megamenu.md)
- [menu](./components/menu.md)
- [mockup-browser](./components/mockup-browser.md)
- [mockup-code](./components/mockup-code.md)
- [mockup-phone](./components/mockup-phone.md)
- [mockup-window](./components/mockup-window.md)
- [modal](./components/modal.md)
- [navbar](./components/navbar.md)
- [otp](./components/otp.md)
- [pagination](./components/pagination.md)
- [progress](./components/progress.md)
- [radial-progress](./components/radial-progress.md)
- [radio](./components/radio.md)
- [range](./components/range.md)
- [rating](./components/rating.md)
- [select](./components/select.md)
- [skeleton](./components/skeleton.md)
- [stack](./components/stack.md)
- [stat](./components/stat.md)
- [status](./components/status.md)
- [steps](./components/steps.md)
- [swap](./components/swap.md)
- [tab](./components/tab.md)
- [table](./components/table.md)
- [text-rotate](./components/text-rotate.md)
- [textarea](./components/textarea.md)
- [theme-controller](./components/theme-controller.md)
- [timeline](./components/timeline.md)
- [toast](./components/toast.md)
- [toggle (switch)](./components/toggle.md)
- [tooltip](./components/tooltip.md)
- [validator](./components/validator.md)

### Component discovery protocol

Before you write daisyUI code, do these steps in sequence:

1. Identify the intended function, behavior, and layout in the request. Do not use only the exact words.
2. Use the component list in this file to select the best candidate components.
3. If the choice is not clear, read the guides for the candidate components that can meet the request before you select one.
4. Compare the description, behavior, syntax, and rules of each candidate with the request.
5. Select the best component or component combination. Obey all its constraints.
6. Use the exact structure and constraints of the selected components.

You must match the meaning, even when the words are different from component names. A component with a different name can still be the best match. Always examine the intended function and meaning.

If the user requests a named component and a guide with that name exists, read that guide first.

© saadeghi · MIT · saadeghi/daisyui

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor