daisyUI 5
daisyUI 5 es una biblioteca CSS para Tailwind CSS 4. Proporciona nombres de clases para componentes UI comunes, colores semánticos y temas.
Cuándo usar este skill
- Usa este skill cada vez que escribas código HTML o JSX.
- Usa este skill para todo trabajo con Tailwind CSS UI.
- Si el usuario utiliza uno de estos términos o solicita trabajo relacionado, usa este skill: daisyUI, componente, UI, Tailwind, layout, plantilla, tema, color, diseño
- Incluso si el usuario no solicita este skill, úsalo.
Referencias que debes leer
| Tarea | Guía | Nota |
|---|---|---|
| Instalar daisyUI | ./install/SKILL.md | Si el proyecto no tiene daisyUI, usa esta guía. |
| Usar nombres de clases de daisyUI | ./usage/SKILL.md | Debes leer esta guía antes de usar nombres de clases de daisyUI en código. |
| Configurar daisyUI | ./config/SKILL.md | Lee esta guía para configurar temas, prefijos, registros u otras opciones. No la necesitas para uso básico. |
| Colores y temas de daisyUI | ./colors/SKILL.md | Debes leer esta guía antes de usar colores de daisyUI en código. |
| Componentes de daisyUI | ./components/ | Debes leer las guías de componentes aplicables antes de usar componentes de daisyUI. Lee más de una guía candidata antes de seleccionar un componente. |
Lista de componentes
- acordeón
- aura
- alerta
- avatar
- insignia
- migas de pan
- botón
- calendario
- tarjeta
- carrusel
- chat
- casilla de verificación
- acordeón colapsable
- cuenta regresiva
- diff
- divisor
- dock (barra de aplicaciones)
- drawer (barra lateral)
- menú desplegable
- FAB (botón de acción flotante)
- fieldset
- entrada de archivo
- filtro
- pie de página
- héroe
- hover-3d
- galería hover
- indicador
- entrada
- join (grupo)
- kbd
- etiqueta
- enlace
- lista
- cargando
- máscara
- megamenú
- menú
- mockup-browser
- mockup-código
- mockup-teléfono
- mockup-ventana
- modal
- barra de navegación
- otp
- paginación
- progreso
- progreso radial
- radio
- rango
- calificación
- seleccionar
- esqueleto
- pila
- stat
- estado
- pasos
- intercambiar
- pestaña
- tabla
- texto giratorio
- área de texto
- controlador de tema
- línea de tiempo
- notificación
- toggle (interruptor)
- tooltip
- validador
Protocolo de descubrimiento de componentes
Antes de escribir código daisyUI, realiza estos pasos en secuencia:
- Identifica la función, el comportamiento y el diseño deseados en la solicitud. No uses solo las palabras exactas.
- Usa la lista de componentes en este archivo para seleccionar los mejores componentes candidatos.
- Si la elección no es clara, lee las guías de los componentes candidatos que puedan cumplir con la solicitud antes de seleccionar uno.
- Compara la descripción, el comportamiento, la sintaxis y las reglas de cada candidato con la solicitud.
- Selecciona el mejor componente o combinación de componentes. Obedece todas sus restricciones.
- Usa la estructura exacta y las restricciones de los componentes seleccionados.
Debes hacer coincidir el significado, incluso cuando las palabras difieran de los nombres de los componentes. Un componente con un nombre diferente puede seguir siendo la mejor opción. Siempre examina la función y el significado deseados.
Si el usuario solicita un componente con nombre y existe una guía con ese nombre, léela primero.