tailwind-design-system
Construir sistemas de diseño Tailwind
Los sistemas de diseño a menudo derivan sin tokens y patrones claros. Esta habilidad proporciona estructuras Tailwind para estandarizar componentes, temas y diseños adaptables en tu base de código.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "tailwind-design-system". Configurar un sistema de diseño Tailwind con tokens y un patrón de botón
Resultado esperado:
- Definido tokens de color semántico y variables de radio para temas claros y oscuros
- Delimitado un botón CVA con variantes, tamaños y comportamiento de anillo de foco
- Incluido notas de accesibilidad para navegación por teclado y estados de error
Usando "tailwind-design-system". Crear una implementación de modo oscuro para una aplicación React
Resultado esperado:
- Proporcionado ThemeProvider usando variables CSS y localStorage
- Mostrado componente de cambio de tema conmutando iconos
- Incluido detección de preferencia del sistema con matchMedia
Usando "tailwind-design-system". Construir componentes de formulario accesibles con estados de error
Resultado esperado:
- Creado componente Input con aria-invalid y mensajes de error
- Añadido componente Label con asociación htmlFor adecuada
- Incluido utilidades de anillo de foco para navegación por teclado
Auditoría de seguridad
SeguroPure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
Factores de riesgo
🌐 Acceso a red (5)
⚙️ Comandos externos (25)
Puntuación de calidad
Lo que puedes crear
Estandarizar componentes del equipo
Crear tokens Tailwind compartidos y componentes base para alinear a múltiples equipos de producto.
Construir arquitectura de tokens
Mapear colores de marca a tokens semánticos y conectarlos a la configuración del tema de Tailwind.
Enviar diseños adaptables
Usar patrones de contenedor y cuadrícula para escalar diseños consistentemente entre puntos de quiebre.
Prueba estos prompts
Crear una configuración de tokens Tailwind con colores semánticos y variables de radio para temas claros y oscuros.
Diseñar variantes de botón CVA con tamaños, estados y notas de accesibilidad para una biblioteca de componentes compartida.
Proporcionar patrones de componentes de entrada y etiqueta con manejo de errores y guía ARIA.
Definir un patrón de utilidad de contenedor y cuadrícula adaptable para tarjetas de producto entre puntos de quiebre.
Mejores prácticas
- Usar tokens semánticos y mapearlos a variables CSS para temática en tiempo de ejecución
- Documentar variantes de componentes y estados predeterminados claramente para consumo del equipo
- Probar estados de foco y navegación por teclado en todos los componentes interactivos
Evitar
- Codificar colores de marca directamente en clases de componentes en lugar de usar tokens
- Omitir definiciones de tokens de modo oscuro y pruebas
- Usar valores arbitrarios como bg-[#123456] en lugar de extender el tema