Styling Rules for daisyUI 5

What it does

When your agent uses it

• Styling a new component with daisyUI 5
• Deciding whether to use a daisyUI class or a Tailwind utility for a style need
• Overriding a daisyUI component's style globally

Example prompts

• “Style this card component using daisyUI classes only.”
• “This button needs custom padding daisyUI doesn't provide. Add it the right way.”
• “Use the @utility directive to make all buttons rounded globally.”

Requirements

• daisyUI 5 with Tailwind CSS

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

1. 1To style an HTML element, add daisyUI class names to it. Add the necessary component class name. Also add the applicable part and modifier…
2. 2If the current daisyUI classes cannot make a necessary change, use Tailwind CSS utility classes. For example, btn px-10 sets custom…
3. 3If CSS specificity prevents a change to a daisyUI style, add ! to the end of the Tailwind utility. For example, btn bg-red-500! overrides…
4. 4If daisyUI does not have an applicable component, make a component with Tailwind CSS utilities.
5. 5When you use Tailwind CSS flex or grid for a layout, add responsive utility prefixes.
6. 6Use only current daisyUI class names or Tailwind CSS utility classes.
7. 7If custom CSS is not necessary, do not write it. If possible, use daisyUI class names or Tailwind CSS utility classes.
8. 8If you need placeholder images, use https://picsum.photos/200/300 with the necessary dimensions.
9. 9If a custom font is not necessary, do not add one.
10. 10If bg-base-100 text-base-content is not necessary, do not add it to the body.
11. 11For design decisions, use the methods in the Refactoring UI book.
12. 12If the user does not request a variant or color, use the default variant. For example, use btn for a button. If the user does not request…

What it can do on your machine

Read from SKILL.md and the folder at commit 9adbeaa. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • picsum.photos

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Styling Rules for daisyUI 5 loads about 846 tokens when it runs. Until then it costs about 15 tokens; SKILL.md has 492 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~15

When it runs · the whole SKILL.md, loaded when a task matches

~846

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from saadeghi/daisyui at commit 9adbeaa, republished under its MIT licence (© saadeghi). 492 words, ~846 tokens.

name

daisyui-usage

description

Usage rules that you must use with daisyUI 5

@utility btn {
  @apply rounded-full;
}

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

© saadeghi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/daisyui/usage of saadeghi/daisyui.

Open the folder on GitHubat commit 9adbeaa