En los propios términos del Skill
Construye interfaces de usuario de calidad de producción que son accesibles, eficientes y visualmente pulidas. El skill se centra en crear una UI que parezca construida por un ingeniero con conciencia de diseño en una empresa de primer nivel, no algo generado por una IA. Impone una adherencia real al sistema de diseño, una accesibilidad WCAG 2.1 AA adecuada, patrones de interacción bien pensados, y evita los tópicos estéticos genéricos de la IA.
El skill abarca la arquitectura de componentes con coubicación, composición en lugar de configuración, gestión de estado que va desde useState local hasta stores globales, diseño responsive mobile-first probado en puntos de quiebre específicos, navegación por teclado, etiquetas ARIA, gestión del foco, estados vacíos y de error significativos, carga esqueleto y actualizaciones optimistas para una velocidad percibida.
Qué produce
- Estados de carga esqueleto con aria-busy y aria-label para contenido que se está cargando
- Estados vacíos y de error significativos con role="status", texto descriptivo, iconos y próximos pasos concretos
Cómo funciona
- 01Coubicar los Archivos del Componente
Coloca la implementación del componente, las pruebas, las historias, los hooks personalizados y los tipos juntos en una sola carpeta con el nombre del componente.
- 02Componer los Componentes, no Configurarlos
Construye API de componentes componibles con hijos anidados en lugar de objetos de configuración cargados de props.
- 03Separar la Obtención de Datos de la Presentación
Crea componentes contenedores que gestionan la carga de datos, los errores y los estados vacíos, y luego pasan datos limpios a los componentes de presentación.
- 04Elegir la Gestión de Estado según el Alcance
Usa useState para el estado de UI específico del componente, estado elevado para 2-3 componentes hermanos, Context para tema/autenticación/idioma, estado en la URL para filtros y paginación, bibliotecas de estado de servidor para datos remotos, y stores globales para el estado compartido complejo del cliente.
- 05Seguir los Tokens del Sistema de Diseño
Usa tokens de color semánticos como text-primary y bg-surface en lugar de valores hexadecimales directos, mantén una escala de espaciado consistente en incrementos de 0.25rem y respeta la jerarquía tipográfica.
- 06Implementar la Accesibilidad WCAG 2.1 AA
Haz que todos los elementos interactivos sean accesibles por teclado, añade etiquetas ARIA a los controles sin etiqueta, gestiona el foco cuando el contenido cambia, garantiza un contraste de 4.5:1 para el texto normal y ofrece estados vacíos y de error significativos.