ui-design-system
✓Genera componentes de interfaz de usuario, diseños y tokens de diseño consistentes siguiendo un sistema de diseño. Aplica estándares de espaciado, color, tipografía y accesibilidad en todos los proyectos de React/TypeScript. Úselo al crear nuevos componentes de la interfaz de usuario, crear diseños de páginas, elegir colores o tipografía, configurar tokens de diseño o revisar el código de la interfaz de usuario para garantizar la coherencia del diseño. Cubre la cuadrícula de espaciado de 8 puntos, el uso del token CSS Tailwind, primitivas shadcn/ui, cumplimiento de WCAG 2.1 AA, puntos de interrupción receptivos, estructura HTML semántica e interfaces de componentes TypeScript. NO cubre la implementación de backend (use python-backend-expert), las pruebas (use patrones de prueba de reacción) o la implementación (use la canalización de implementación).
Instalación
SKILL.md
Before generating any UI code, check the project for existing tokens:
If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).
Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.
Genera componentes de interfaz de usuario, diseños y tokens de diseño consistentes siguiendo un sistema de diseño. Aplica estándares de espaciado, color, tipografía y accesibilidad en todos los proyectos de React/TypeScript. Úselo al crear nuevos componentes de la interfaz de usuario, crear diseños de páginas, elegir colores o tipografía, configurar tokens de diseño o revisar el código de la interfaz de usuario para garantizar la coherencia del diseño. Cubre la cuadrícula de espaciado de 8 puntos, el uso del token CSS Tailwind, primitivas shadcn/ui, cumplimiento de WCAG 2.1 AA, puntos de interrupción receptivos, estructura HTML semántica e interfaces de componentes TypeScript. NO cubre la implementación de backend (use python-backend-expert), las pruebas (use patrones de prueba de reacción) o la implementación (use la canalización de implementación). Fuente: hieutrtr/ai1-skills.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system- Fuente
- hieutrtr/ai1-skills
- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-02-17
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es ui-design-system?
Genera componentes de interfaz de usuario, diseños y tokens de diseño consistentes siguiendo un sistema de diseño. Aplica estándares de espaciado, color, tipografía y accesibilidad en todos los proyectos de React/TypeScript. Úselo al crear nuevos componentes de la interfaz de usuario, crear diseños de páginas, elegir colores o tipografía, configurar tokens de diseño o revisar el código de la interfaz de usuario para garantizar la coherencia del diseño. Cubre la cuadrícula de espaciado de 8 puntos, el uso del token CSS Tailwind, primitivas shadcn/ui, cumplimiento de WCAG 2.1 AA, puntos de interrupción receptivos, estructura HTML semántica e interfaces de componentes TypeScript. NO cubre la implementación de backend (use python-backend-expert), las pruebas (use patrones de prueba de reacción) o la implementación (use la canalización de implementación). Fuente: hieutrtr/ai1-skills.
¿Cómo instalo ui-design-system?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/hieutrtr/ai1-skills --skill ui-design-system Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/hieutrtr/ai1-skills
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-17