Pular pro conteúdo

Daisyui skill

O Claude monta páginas e telas com os componentes prontos do daisyUI, usando as classes e as cores de tema do jeito certo.

por saadeghi

instalações
12,1 mil
estrelas no GitHub
42,7 mil
No skills.sh desde
maio de 2026
Licença
MIT

Atualizada no GitHub em 17 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

É a skill oficial do daisyUI, a biblioteca de componentes pro Tailwind CSS 4. Em vez de empilhar dezenas de classes do Tailwind, o Claude usa nomes prontos como btn, card e modal, mais as cores semânticas e os temas do daisyUI 5.

Traz guias de instalação, uso das classes, configuração, cores e temas, e um arquivo pra cada um dos 68 componentes: navbar, hero, drawer, tabela, steps, timeline, toast, mockup de celular e de navegador, entre outros. O Claude tem que ler o guia antes de usar.

Pra escolher o componente, segue um roteiro: entende a função do que você pediu, não só as palavras, compara os candidatos lendo mais de um guia e usa a estrutura exata do escolhido. Ela entra sozinha sempre que o Claude escreve HTML ou JSX.

Nas palavras de quem fez

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.

saadeghi, no SKILL.md

Quando usar

  • Montar uma landing page ou um painel rápido em Tailwind
  • Pôr tema claro e escuro no site sem reescrever as cores
  • Criar formulário, modal ou menu sem desenhar do zero
  • Padronizar o visual de um projeto que já usa daisyUI

Depois de instalar, é só pedir assim

  • Monta uma landing page com hero, três cards de plano e rodapé usando daisyUI
  • Instala o daisyUI nesse projeto e cria um tema com as cores da minha marca
  • Faz o painel admin com menu lateral, tabela de pedidos e números no topo

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

  • Gen Agent Trust HubPassou
  • SocketPassou
  • SnykPassou

Perguntas

Como instalar a Daisyui no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Daisyui, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Precisa de algo instalado?

O projeto precisa do Tailwind CSS 4 com o daisyUI 5. Se ainda não tiver o daisyUI, a skill traz um guia de instalação que o Claude segue. Não pede chave de API nem conta.

Roda no Codex e no Antigravity?

Sim. É só texto: um SKILL.md com guias em Markdown, sem programa extra.

Ela entra em todo código que eu pedir?

Entra sempre que o Claude escreve HTML ou JSX, mesmo sem você pedir. Num projeto que não usa daisyUI, vale avisar o Claude pra não usar.

Levar essa skill

1x daisyuiR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/saadeghi/daisyui

Aprenda a usar