ui-skills
Construir Interfaces de Usuario Consistentes con Restricciones de Diseño
Los agentes de IA a menudo producen código de interfaz inconsistente en diferentes sesiones. Esta skill proporciona restricciones y patrones de diseño opinados para garantizar una generación de interfaces accesibles y consistentes cada vez.
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 "ui-skills". Generate a card component using ui-skills patterns
Resultado esperado:
Un componente Card reutilizable con padding consistente, radio de borde, tokens de sombra y soporte para slots de encabezado, cuerpo y pie. Incluye estados hover y atributos de accesibilidad.
Usando "ui-skills". Create a modal dialog following ui-skills constraints
Resultado esperado:
Un componente Modal con captura de foco, manejo de tecla Escape, detección de clic en el fondo y roles ARIA apropiados para lectores de pantalla.
Auditoría de seguridad
SeguroThis skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.
Puntuación de calidad
Lo que puedes crear
Desarrollador Frontend Construyendo un Sistema de Diseño
Usa esta skill para generar patrones de componentes consistentes que sigan los principios de diseño establecidos y los estándares de accesibilidad.
Agente de IA Creando Componentes de Interfaz
Permite que los asistentes de codificación de IA produzcan código de interfaz que se adhiera a las restricciones y patrones de diseño de tu equipo.
Equipo de Startup Estandarizando el Desarrollo de Interfaz
Establece un vocabulario compartido de patrones de interfaz para equipos pequeños sin recursos de diseño dedicados.
Prueba estos prompts
Usando los patrones de ui-skills, genera un componente de botón con estados primario, secundario y deshabilitado. Incluye atributos de accesibilidad y estados de foco.
Aplica las restricciones de ui-skills para crear un componente de entrada de texto con etiqueta, marcador de posición, estado de error y mensajes de validación. Sigue las pautas WCAG.
Usando los patrones de ui-skills, crea un componente de navegación que funcione en escritorio y móvil. Incluye navegación por teclado y soporte para lectores de pantalla.
Aplica las restricciones de ui-skills para generar un componente de tabla de datos con columnas ordenables, selección de filas y paginación. Asegura el cumplimiento de accesibilidad.
Mejores prácticas
- Siempre define tokens de diseño (espaciado, colores, tipografía) antes de generar componentes
- Prueba los componentes con navegación por teclado y lectores de pantalla durante el desarrollo
- Documenta las props de los componentes, estados y ejemplos de uso para consistencia del equipo
Evitar
- Codificar valores de color en lugar de usar tokens del sistema de diseño
- Ignorar estados de foco y navegación por teclado en elementos interactivos
- Crear componentes demasiado complejos que deberían dividirse en unidades más pequeñas
Preguntas frecuentes
¿Qué frameworks soporta esta skill?
¿Esta skill genera código CSS real?
¿Cómo integro esto con mi sistema de diseño existente?
¿Puedo personalizar los requisitos de accesibilidad?
¿Es esta skill adecuada para desarrollo mobile-first?
¿Con qué frecuencia se actualizan los patrones de diseño?
Detalles del desarrollador
Autor
sickn33Licencia
MIT
Repositorio
https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skillsRef.
main
Estructura de archivos
📄 SKILL.md