tailwind-design-system

Resumen

¿Qué es tailwind-design-system?

tailwind-design-system es una habilidad práctica para construir sistemas de diseño escalables y listos para producción usando Tailwind CSS v4. Se enfoca en configuración CSS-first, tokens de diseño, variantes de componentes, patrones responsivos y accesibilidad. Esta habilidad está diseñada para desarrolladores frontend, diseñadores UI y equipos que buscan estandarizar sus patrones de interfaz o migrar de Tailwind v3 a v4.

¿Quién debería usar esta habilidad?

• Equipos frontend creando bibliotecas de componentes con Tailwind CSS v4
• Desarrolladores implementando tokens de diseño y theming
• Diseñadores UI construyendo componentes responsivos y accesibles
• Proyectos que estandarizan patrones UI en múltiples bases de código
• Equipos migrando de Tailwind v3 a v4

¿Qué problemas resuelve?

• Simplifica la configuración de sistemas de diseño escalables
• Proporciona orientación sobre patrones específicos de v4 y migración
• Ayuda a estandarizar componentes UI y tokens de diseño
• Soporta mejores prácticas de accesibilidad y diseño responsivo

Cómo usar

Pasos de instalación

1. Instala tailwind-design-system usando:

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. Comienza revisando el archivo SKILL.md para un flujo de trabajo general y conceptos clave.
3. Explora los archivos de soporte:
   • README.md para uso general
   • AGENTS.md para guía específica de agentes
   • metadata.json para detalles de configuración
   • references/advanced-patterns.md para patrones avanzados de Tailwind v4

Archivos y carpetas clave

• SKILL.md: Flujo principal y resumen
• references/advanced-patterns.md: Uso avanzado, incluyendo animaciones CSS nativas, modo oscuro, utilidades personalizadas y consejos de migración
• references/: Guías y patrones adicionales

Adaptación a tu proyecto

• Usa la habilidad como plantilla para tu propio repositorio y herramientas
• Personaliza tokens de diseño, variantes de componentes y patrones responsivos según tus necesidades UI
• Consulta patrones avanzados para implementar animaciones y características de accesibilidad

Ejemplo: Patrones avanzados de Tailwind v4

• Aprende a usar animaciones CSS nativas con @starting-style
• Implementa modo oscuro usando variantes CSS personalizadas
• Construye diálogos y popovers accesibles con React y Radix UI

Preguntas frecuentes

¿Es tailwind-design-system compatible con Tailwind v3?

No, esta habilidad está optimizada para Tailwind CSS v4. Para proyectos con v3, consulta la guía oficial de actualización.

¿Cuáles son los principales beneficios de usar tailwind-design-system?

• Acelera la creación de sistemas de diseño UI escalables y consistentes
• Proporciona patrones actualizados para Tailwind v4, incluyendo theming CSS-first y diseño responsivo
• Ofrece ejemplos avanzados para animaciones, accesibilidad y modo oscuro

¿Dónde puedo encontrar ejemplos de uso avanzado?

Consulta el archivo references/advanced-patterns.md para muestras de código detalladas y listas de verificación para migración.

¿Cómo puedo previsualizar todos los recursos disponibles?

Abre la pestaña Archivos para inspeccionar el árbol completo, incluyendo referencias anidadas y scripts auxiliares. Esto te ayuda a entender la estructura de la habilidad y adaptarla a tu flujo de trabajo.

¿Cuándo no es recomendable usar tailwind-design-system?

Si tu proyecto usa otro framework CSS o no está listo para migrar a Tailwind v4, esta habilidad puede no ser adecuada. Está enfocada en patrones y flujos específicos de Tailwind v4.