sickn33/tailwind-design-system

¿Qué hace tailwind-design-system?

Construye sistemas de diseño listos para producción con Tailwind CSS, incluyendo tokens de diseño, variantes de componentes, patrones responsivos y accesibilidad.

Visión General

Esta habilidad guía a los agentes de IA en la creación de sistemas de diseño robustos utilizando Tailwind CSS. Se enfoca en cuatro áreas principales:

1. Tokens de Diseño: Definición de colores, tipografía, espaciado, sombras y otros valores fundamentales como variables CSS personalizadas.
2. Variantes de Componentes: Creación de componentes reutilizables usando la directiva @apply de Tailwind para encapsular estilos.
3. Patrones Responsivos: Implementación de diseños adaptables utilizando utilidades responsivas de Tailwind como sm:, md:, lg:, etc.
4. Accesibilidad: Integración de mejores prácticas de accesibilidad (a11y) como roles ARIA, atributos aria-*, manejo de foco y contraste de colores.

Plataformas Soportadas

Esta habilidad está diseñada para agentes de IA que trabajan con proyectos que utilizan Tailwind CSS, como:

• Claude Code: Se puede ejecutar en cualquier proyecto que tenga Tailwind CSS instalado.
• Cursor: Compatible con la edición de código y la generación de componentes.
• Herramientas CLI: Se puede integrar con flujos de trabajo de línea de comandos.

Requisitos

• Node.js y npm (o yarn/pnpm) instalados.
• Un proyecto con Tailwind CSS ya configurado.
• Conocimientos básicos de CSS y Tailwind.

Cómo Funciona

1. Definir Tokens de Diseño: Usa @layer base y @apply para establecer valores por defecto o crea variables CSS personalizadas en tailwind.config.js.

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         colors: {
           primary: {
             50: '#eff6ff',
             100: '#dbeafe',
             // ... más tonos
             500: '#3b82f6',
           },
         },
         fontFamily: {
           sans: ['Inter', 'sans-serif'],
         },
       },
     },
   }
   

2. Crear Variantes de Componentes: Utiliza @apply en archivos CSS para crear componentes reutilizables.

   /* components.css */
   .btn-primary {
     @apply bg-primary-500 text-white font-semibold py-2 px-4 rounded;
   }
   .btn-primary:hover {
     @apply bg-primary-700;
   }
   .btn-primary:focus {
     @apply ring-2 ring-primary-500 ring-offset-2;
   }
   

3. Implementar Patrones Responsivos: Aplica clases responsivas directamente en el marcado.

   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
     <!-- contenido -->
   </div>
   

4. Añadir Accesibilidad: Incluye atributos ARIA y manejo de foco en los componentes.

   <button class="btn-primary" aria-label="Cerrar" role="button" tabindex="0">
     Cerrar
   </button>
   

Ejemplos de Uso

Ejemplo 1: Crear un Botón Base

.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm;
}
.btn:focus {
  @apply outline-none ring-2 ring-offset-2;
}

Ejemplo 2: Sistema de Tarjetas

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="placeholder.jpg" alt="Descripción de la imagen">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Título de la Tarjeta</div>
    <p class="text-gray-700 text-base">
      Contenido de la tarjeta.
    </p>
  </div>
</div>

Conclusión

Esta habilidad proporciona una base sólida para construir sistemas de diseño mantenibles y escalables con Tailwind CSS, garantizando consistencia visual, flexibilidad responsiva y accesibilidad.