packages/docs/src/routes/(routes)/blog/(posts)/daisyui-skill/+page.md
AI coding agents are getting better at writing UI code, but they still have one big problem:
They don't always know the rules of your UI system.
They may know Tailwind CSS. They may even know daisyUI from training data. But that doesn't mean they know the current component list, the correct class names, the theme rules, or the small details that make the generated code actually fit a real project.
That's why we now have daisyUI Skill.
A skill is a set of instructions and reference files for your coding agent. It tells the agent how to do a specific kind of work.
For daisyUI, that means the agent gets compact docs for:
The important part is that this lives outside your prompt.
You don't need to paste a long explanation every time you want a button, card, modal, table, or theme-aware layout. You install the skill once, then ask your agent to use daisyUI.
daisyUI is simple to use:
<button class="btn btn-primary">Save</button>
But simple does not mean there are no rules.
There are semantic colors like primary, base-100, base-content, success, warning, and error. These colors are theme-aware, so they change correctly when the theme changes.
There are component classes like card, modal, alert, navbar, menu, table, and input.
There are modifiers like btn-outline, card-border, modal-open, menu-horizontal, input-error, and many more.
And there are things an agent should avoid. For example, it should not randomly use text-gray-800 on a page that must work with dark themes. It should not invent class names that don't exist. It should not use custom CSS for something daisyUI already provides.
Humans learn these patterns by reading docs and building projects.
Agents need the same context.
daisyUI Skill includes the official daisyUI instructions in markdown format.
It tells the agent when to use daisyUI, how to choose components, how to use semantic colors, and how to avoid common mistakes.
It also includes component docs. So when an agent needs to build a form, it can look at input, select, textarea, fieldset, label, validator, button, and related components instead of guessing from memory.
This matters because UI generation is not only about writing shorter code.
It's about writing code that belongs in the project.
For example, this is not great:
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
Save changes
</button>
It may look fine in one theme, but now the agent made a fixed blue button. If the project changes theme, the button does not follow it.
This is better:
<button class="btn btn-primary">Save changes</button>
Now the button uses the current daisyUI theme. It also gets the correct hover, active, focus, disabled, sizing, and accessibility-related styles from daisyUI.
Less code. Better result.
You can install daisyUI Skill with:
npx skills add saadeghi/daisyui
It works with any coding agent (Codex, Claude, Cursor, etc.)
After that, prompt your agent like this:
Make a pricing card with daisyUI. Use daisyUI skill.
Or be more specific:
Create a settings page with daisyUI.
Use tabs for sections, cards for settings groups,
alerts for warnings, and btn-primary for the save action.
Use daisyUI skill.
The second prompt is better because it gives the agent a clear UI shape. The skill gives it the implementation rules.
Prompts are great for one task.
Skills are better for things you do again and again.
If you build with daisyUI often, you probably don't want to keep explaining:
The skill carries that instruction every time. It reduces the chance of random class names and makes follow-up edits easier because the generated code uses known daisyUI patterns.
This is especially useful when you ask an agent to modify an existing page. The agent can inspect the code, see btn, card, alert, menu, or table, and continue with the same component language instead of drifting into one-off Tailwind styles.
Skills are not the only way to give daisyUI context to AI.
We also have Blueprint MCP, the official daisyUI MCP server.
Should I use a skill or MCP?
Skills are simple to install and easy to understand. MCP is strict, dynamic and it's more efficient with LLM tokens because it gives context only when needed.
Both solve the same core problem: agents generate better UI when they have the right daisyUI context.
AI can generate a lot of UI code.
That's useful, but speed alone is not enough. Mediocre UI takes even time to review, clean up, and rewrite. You wouldn't want your UI to look like every other AI generated UI. You need a design system to take full control over the UI, make it consistent, and easy to maintain.
daisyUI Skill helps the agent stay inside the daisyUI system. It knows the component names. It knows the color rules. It knows that btn btn-primary is better than a pile of fixed blue utility classes for a primary action.
The result is code that is shorter, more theme-aware, and easier to maintain.
If you use AI agents for UI work, install the skill and try a few prompts:
npx skills add saadeghi/daisyui
Then ask your agent to build something real:
Build a responsive dashboard header with navbar, menu,
theme controller, and user dropdown. Use daisyUI skill.
That's where skills become useful. Not in a demo, but in the everyday work of generating, reviewing, and improving UI.
The free daisyUI Skill is the general-purpose skill for daisyUI components and themes.
There are also specialized skills:
Start with the free daisyUI Skill. If your project needs lots of charts or dashboards, those specialized skills can save even more prompting and cleanup time.