106.9K+Descargar
Ir a la guía de uso
Building Componentspor vercel

Building Components Skill.

Diseña API de componentes UI reutilizables teniendo en cuenta la accesibilidad y la distribución.

  • API de componentes
  • Accesibilidad
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · building-componentsSKILL.md
Tarea Diseña API de componentes UI reutilizables teniendo en cuenta la accesibilidad y la distribución. Resultados Para una petición de implementación, un componente con un modelo explícito de composición y estado. Antes de empezar El breve SKILL.md depende de sus referencias adjuntas para las instrucciones detalladas de implementación.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Diseña API de componentes UI reutilizables teniendo en cuenta la accesibilidad y la distribución

Planifica API de componentes accesibles, estado controlado, estilos, tokens y distribución con Building Components de Vercel.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Building Components guía las decisiones de ingeniería de una biblioteca UI reutilizable. Dirige al agente a referencias específicas sobre composición, teclado, gestión de estado, interfaces TypeScript y estilos. El punto de entrada cubre primitivas, componentes, bloques y plantillas, de modo que el nivel de abstracción se ajuste al entregable real.

Esta skill resulta útil cuando un componente debe servir a varios consumidores y no a una sola pantalla. Reúne el diseño de API, la accesibilidad y la distribución en la misma conversación. La fuente es principalmente un índice: los archivos enlazados forman parte de la skill operativa y deben acompañar al archivo de entrada.

Entregables esperados

  • Para una petición de implementación, un componente con un modelo explícito de composición y estado.
  • Para una petición de documentación, instrucciones de uso sobre la API del componente y su comportamiento pertinente.
  • Un plan de empaquetado o registro adecuado cuando la petición incluya distribución.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Define el contrato del componente

    Decide si la tarea corresponde a una primitiva, un componente, un bloque o una plantilla. Establece su interfaz pública y los contextos en que la compondrá el código que la utilice.

  2. 02
    Lee las guías de ingeniería pertinentes

    Lee state.mdx para el comportamiento controlado y no controlado, composition.mdx para la composición pública y accessibility.mdx para teclado y foco. Consulta types.mdx y styling.mdx para la implementación. Añade referencias de polimorfismo o as-child solo si quienes usen la API necesitan esos patrones.

  3. 03
    Implementa y documenta la interfaz

    Conecta estado y presentación mediante la API elegida. Explica el uso previsto y elige npm, un registro u otra vía documentada de distribución solo cuando sea necesario.

02 Cuándo usarlo

Cuándo usarla

El breve SKILL.md depende de sus referencias adjuntas para las instrucciones detalladas de implementación.

Buen encaje

  • API de componentes compartidosUn componente compartido necesita una API pública meditada antes de que varios equipos lo adopten.
  • Ingeniería de bibliotecasUna biblioteca UI necesita prácticas coherentes de accesibilidad, temas y documentación.

Límites que conviene comprobar

  • Referencias incluidasEl breve SKILL.md depende de sus referencias adjuntas para las instrucciones detalladas de implementación.
  • Alcance de la verificaciónEl archivo de entrada no certifica la accesibilidad de un componente ni garantiza compatibilidad con todos los frameworks.

Aporta estos datos

  • Consumidores previstosLos consumidores previstos del componente y ejemplos de uso.
  • Convenciones del repositorioLa pila de componentes, el sistema de tokens y las convenciones TypeScript del repositorio.
  • Comportamiento y distribuciónComportamiento de teclado, responsabilidad del estado y destino de distribución requeridos.

03 Decisiones importantes

Decisiones importantes

  1. Responsabilidad explícita del estado

    El estado controlado y no controlado se convierten en decisiones deliberadas de API.

  2. Opciones de composición

    Las referencias cubren slots, render props y as-child para componer una API pública.

  3. Planificación de la distribución

    Publicación y documentación se consideran junto con la implementación.

04 Ejemplo de brief

Prueba un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Los consumidores previstos del componente y ejemplos de uso.

Archivo fuente original
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa building-components para diseñar un componente desplegable reutilizable para nuestra biblioteca React. Primero inspecciona las primitivas, tokens y patrones TypeScript existentes. Propón la API pública, incluidos estado controlado y no controlado, antes de implementar. Lee las referencias pertinentes sobre composición, accesibilidad y estado. Cubre teclado y foco, proporciona ejemplos de composición del activador y el contenido, y documenta los estilos mediante nuestros tokens. Mantén la publicación en un registro o npm como propuesta separada, salvo que la tarea incluya explícitamente un lanzamiento.

Comprueba el resultado

Comprueba el resultado real con estos criterios observables.

  • Los ejemplos ejercitan la API pública documentada y no detalles internos privados.
  • El teclado, foco y estado cuentan con resultados explícitos de verificación.
  • Las instrucciones de empaquetado coinciden con el canal previsto de distribución.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
vercel
Repositorio
vercel/components.build
Archivo del skill
SKILL.md
Licencia
Not confirmed
Versión revisada
2026-11-02 · ba7274504373

Notas de lectura

  1. Alcance de la licenciaLas declaraciones originales se contradicen en la misma revisión fijada: LICENSE en la raíz declara Apache License 2.0, mientras la sección License de README.md dice MIT y enlaza ese archivo. No existe una excepción local en skills/building-components. No muestres una etiqueta MIT sin matices; hace falta una aclaración del proyecto original para resolver el conflicto.
Resumen editorial de la fuente
Diseña API de componentes UI reutilizables teniendo en cuenta la accesibilidad y la distribución.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Esta skill proporciona un tema visual listo para usar?

Su entrada se centra en la ingeniería de componentes y remite a referencias de tokens y estilos. El producto debe seguir aportando sus requisitos visuales.

¿Todos los componentes necesitan polimorfismo?

No. Polimorfismo y as-child son temas de referencia disponibles que se eligen cuando la API los necesita.

¿Ayuda a distribuir mediante un registro?

Sí. La distribución por registro, la publicación npm y los mercados de componentes tienen cada uno una referencia específica enlazada.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md