daisyui Skill for Claude Code: Build Tailwind UIs with daisyUI 5
Official daisyUI 5 skill that makes your assistant build Tailwind CSS interfaces with the right components, colors and themes.
- Installs
- 12.6K
- on skills.sh
- Stars
- 42.7K
- on GitHub
- Files
- 60+
- besides SKILL.md
- Updated
- Oct 2026
- last repo commit
Once installed, the assistant uses daisyUI class names when it writes HTML or JSX. Before it picks a component it follows a discovery protocol: it reads the guides for the candidate components, then uses the exact structure that component's guide gives. It also has guides for installing, configuring and coloring daisyUI.
SKILL.md tells the assistant to use it each time it writes HTML or JSX and for all Tailwind CSS UI work, even when you do not ask. It needs Tailwind CSS 4. The folder has 73 files including SKILL.md, and no scripts.
Good for
- Front-end developers using Tailwind CSS 4
- Designers prototyping pages with ready-made components
- Teams that want consistent daisyUI markup from their AI assistant
Install daisyui
Claude Code
- 1
Copy this prompt.
Install the daisyui skill in Claude Code. Run this command: /plugin marketplace add saadeghi/daisyui /plugin install daisyui@daisyui Then check that it loaded and tell me how to use it.
- 2
Paste it into Claude Code. It shows the change and asks before running it.
Pick one route. The repo ships a Claude Code marketplace (named daisyui) that lists two plugins. The daisyui plugin is this skill; its manifest sets it to be enabled by default. The second plugin, daisyui-blueprint, is an MCP server that its listing says needs a paid license, so do not install it for this skill. The skills CLI and folder routes add only the skill folder.
From the vendor's docs. Source.
What's in the skill
When it loads
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.
Sections in SKILL.md
- When to use this skill
- References that you must read
- List of components
- Component discovery protocol
Key facts
- License
- MIT (crawl data)
- Installs on skills.sh
- 12,573 as of 2026-11-02
- Last repo commit
- 2026-10-31
- Version
- 5.7.x (SKILL.md metadata)
What it includes
Six steps from naming the function to following the chosen guide.
Read ·
Component discovery protocol68 components, from accordion and button to timeline, toast and validator.
One Markdown guide per component in the components folder.
Read ·
Component guidesTells the agent to run npm i -D daisyui@latest and add @plugin "daisyui"; to the CSS.
Also covers a CDN setup and framework guides on daisyui.com.
Runs code ·
Install guideTwelve rules, such as using daisyUI classes first and Tailwind utilities for the rest.
Read ·
Usage rulesSemantic color names such as primary, base-100 and neutral, and how to use them.
Read ·
Colors and themesTheme, prefix and other plugin options for the daisyUI CSS plugin.
Read ·
Config guide
From the official docs
Permissions
Low risk
It can install the daisyUI package and edit your CSS, and its examples load files from public hosts. It also tells the assistant to apply itself to all HTML and JSX work.
What it can do
- Read your data
- Create and change things
- Delete things
- Read-only mode
Watch out for
It can install a package and edit your CSS
The install guide runs npm i -D daisyui@latest and adds @plugin "daisyui"; to your CSS file. It says to use it only when the project does not have daisyUI. github.com
It loads files from public hosts
The CDN option links daisyUI and Tailwind from cdn.jsdelivr.net, and the usage rules suggest picsum.photos for placeholder images. Use the npm install for production pages. github.com
It tells the assistant to use it on all UI work
SKILL.md says to use the skill each time you write HTML or JSX, even if you do not ask. Remove the skill if you do not want daisyUI in non-daisyUI projects. github.com
The plugin route is enabled by default
The daisyui plugin manifest sets defaultEnabled to true and its description tells the assistant to trigger on any HTML or JSX it writes. The same marketplace also lists daisyui-blueprint, an MCP server that its listing says needs a paid license. This skill does not need it. github.com
Technical details
| Talks to | cdn.jsdelivr.net (CDN option in install/SKILL.md). picsum.photos (placeholder images in usage/SKILL.md) |
|---|---|
| Scopes |
|
Questions
What does the daisyui skill do?
It makes your assistant write Tailwind CSS interfaces with daisyUI 5 components, colors and themes. It follows the guide for each component instead of guessing class names.
How do I install it?
Use the install box at the top of this page. Your project also needs Tailwind CSS 4, and the install guide adds daisyUI itself with an npm command if it is missing.
Will it run on every UI request?
SKILL.md tells the assistant to use it each time it writes HTML or JSX and for all Tailwind CSS UI work, even if you did not ask. Remove it for projects that do not use daisyUI.
Does it work with Tailwind CSS 3?
No. SKILL.md says daisyUI 5 is for Tailwind CSS 4 and tells the agent not to use tailwind.config.js.
Is it safe?
The skill bundles no scripts. Its install guide can run npm i -D daisyui@latest and edit your CSS file, and its examples load files from cdn.jsdelivr.net. Approve the npm command before it runs.
Is it official?
SKILL.md calls itself the official daisyUI component-library skill, and its metadata points to daisyui.com/SKILL.md.
Information
updated Nov 2, 2026
- Repository
- saadeghi/daisyui
- Folder
skills/daisyui
Sources
Docs, issue trackers and discussions this page is built from.
Show all 6Hide
- daisyUI Claude marketplace manifest · github.com
- daisyUI Claude plugin manifest · github.com
- SKILL.md · github.com
- SKILL.md · github.com
- SKILL.md · github.com
- README.md · github.com