building-components
por vercel
Guía completa para construir componentes de interfaz de usuario modernos, accesibles y componibles. Cubre la taxonomía de componentes (primitivos, componentes, bloques, plantillas), principios de diseño fundamentales e implementación de accesibilidad, incluyendo ARIA, navegación por teclado y cumplimiento de WCAG. Incluye patrones para APIs componibles, polimorfismo, estado controlado/no controlado y el patrón as-child para composición flexible de elementos. Proporciona orientación sobre tokens de diseño, sistemas de tematización, enfoques de estilo y el uso de...
npx skills add https://github.com/vercel/components.build --skill building-componentsBuilding Components
When to use this skill
Use when the user is:
- Building new UI components (primitives, components, blocks, templates)
- Implementing accessibility features (ARIA, keyboard navigation, focus management)
- Creating composable component APIs (slots, render props, controlled/uncontrolled state)
- Setting up design tokens and theming systems
- Publishing components to npm or a registry
- Writing component documentation
- Implementing polymorphism or as-child patterns
- Working with data attributes for styling/state
References
- definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)
- principles.mdx - Core principles for component design
- accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
- composition.mdx - Composable component patterns
- as-child.mdx - The as-child pattern for element polymorphism
- polymorphism.mdx - Polymorphic component patterns
- types.mdx - TypeScript typing patterns for components
- state.mdx - Controlled vs uncontrolled state management
- data-attributes.mdx - Using data attributes for styling and state
- design-tokens.mdx - Design token systems and theming
- styling.mdx - Component styling approaches
- registry.mdx - shadcn-style registry distribution
- npm.mdx - Publishing components to npm
- marketplaces.mdx - Component marketplace distribution
- docs.mdx - Writing component documentation
Más skills de vercel
vercel
vercel
API REST de Vercel emulada para desarrollo y pruebas locales. Úsala cuando el usuario necesite interactuar con endpoints de la API de Vercel localmente, probar integraciones de Vercel,…
cron-jobs
vercel
Configuración y mejores prácticas de Vercel Cron Jobs. Úsalo al agregar, editar o depurar tareas programadas en vercel.json.
codegen
vercel
Utilidades de generación de código para json-render. Úselo al generar código a partir de especificaciones de UI, crear exportadores de código personalizados, recorrer especificaciones o serializar propiedades para…
next-best-practice
vercel
Prácticas recomendadas de Next.js: convenciones de archivos, límites de RSC, patrones de datos, APIs asíncronas, metadatos, manejo de errores, manejadores de rutas, optimización de imágenes/fuentes,…
benchmark-sandbox
vercel
Ejecuta escenarios de evaluación de vercel-plugin en Vercel Sandboxes en lugar de paneles locales de WezTerm. Aprovisiona microVMs efímeras con Claude Code y el plugin preinstalado,…
write-guide
vercel
Producir una guía técnica que enseñe un caso de uso del mundo real mediante ejemplos progresivos. Los conceptos se introducen solo cuando el lector los necesita.
benchmark-testing
vercel
Crear y lanzar proyectos de prueba de benchmark para ejercitar la inyección de habilidades de vercel-plugin en escenarios realistas. Configura directorios aislados, instala el…
ai-gateway
vercel
Guía experta de Vercel AI Gateway. Úselo al configurar el enrutamiento de modelos, la conmutación por error de proveedores, el seguimiento de costos o la gestión de múltiples proveedores de IA a través de un...