core-components
Construye interfaces de usuario consistentes con componentes principales
También disponible en: ChrisWiles
Los estilos inconsistentes y el uso fragmentado de componentes crean desafíos de mantenimiento. Esta habilidad proporciona un sistema de diseño unificado con tokens y patrones para interfaces cohesivas.
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 "core-components". Crea un encabezado de pantalla de configuración con título e icono
Resultado esperado:
Un componente ScreenHeader con el texto de título usando el color $textPrimary y un icono posicionado en un HStack con gap de $3, envuelto en un Box con padding de $4 y fondo $backgroundPrimary.
Usando "core-components". Aplica estilo a un botón deshabilitado
Resultado esperado:
Un componente Button con variant establecido en solid, prop isDisabled establecida en true, que aplica automáticamente estilos atenuados usando $textTertiary para el color de la etiqueta.
Auditoría de seguridad
SeguroStatic analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
Puntuación de calidad
Lo que puedes crear
Desarrollador Frontend Construyendo Nuevas Funcionalidades
Un desarrollador necesita agregar una nueva pantalla de configuración con formularios y listas. Usa esta habilidad para aplicar tokens de espaciado, tokens de color y patrones de componentes que coincidan con el sistema de diseño existente.
Equipo Estandarizando Componentes de UI
Un equipo nota estilos inconsistentes en toda su aplicación. Usa esta habilidad para establecer patrones compartidos para diseños, tipografía y elementos interactivos usando tokens de diseño.
Revisor de Código Haciendo Cumplir Estándares
Durante la revisión de código, un desarrollador identifica valores codificados y componentes de plataforma sin procesar. Consulta esta habilidad para guiar a los contribuyentes hacia el uso adecuado de tokens y componentes principales.
Prueba estos prompts
Muéstrame cómo crear un componente de tarjeta con título y contenido usando la biblioteca de componentes principales con tokens de diseño adecuados.
Crea un formulario de inicio de sesión con entradas de correo electrónico y contraseña usando VStack, componentes Input y tokens de espaciado apropiados. Incluye un botón de envío.
Construye un componente de elemento de lista que muestre el avatar, nombre y subtítulo de un usuario con un icono de flecha. Usa HStack, tokens de gap apropiados y tokens de color semánticos para la jerarquía de texto.
Revisa este código de componente e identifica cualquier valor codificado que deba usar tokens de diseño. Muestra la versión corregida con el uso adecuado de tokens para espaciado, colores y tipografía.
Mejores prácticas
- Usa siempre tokens de diseño ($4, $textPrimary) en lugar de valores codificados (16, #333333)
- Importa desde components/core en lugar de usar primitivas de react-native sin procesar
- Usa HStack y VStack para diseños en lugar de configuración manual de flexbox
Evitar
- Usar View y Text de react-native en lugar de Box y Text de componentes principales
- Codificar valores de píxeles para espaciado, colores o tipografía
- Crear objetos de estilo en línea en lugar de usar props basadas en tokens