Component Specpor Owl-Listener

Component Spec Skill.

Haz que un componente pueda implementarse explicando su comportamiento con tanto cuidado como su apariencia.

Sistemas de diseño
Especificaciones

Revisión de la fuente · Component SpecSKILL.md

Tarea Sistemas de diseño Produce • Una especificación de anatomía y variantes • Una tabla de props con tipos, valores por defecto y estado de obligatoriedad • Reglas de estados, comportamiento, accesibilidad y uso Antes de empezar Indica el propósito del componente, sus variantes visuales y la plataforma de destino. El resultado es una especificación para implementar y probar, no un componente implementado.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Component Spec: Especificar un componente de la biblioteca

Un contrato para un solo componente que cubre anatomía, API, variantes, estados de interacción, accesibilidad y uso.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Component Spec define un único componente de un sistema de diseño. Organiza el traspaso en torno a anatomía, variantes, propiedades de API, estados de interacción, comportamiento adaptable, accesibilidad y uso. Las partes obligatorias y opcionales se hacen explícitas.

Su propósito es lograr un acuerdo entre diseñadores y desarrolladores. Una captura estática no refleja el comportamiento de carga de un botón ni la devolución del foco de un diálogo. Por eso la fuente pide ejemplos y casos límite, y deja fuera de esta tarea las plantillas de documentación más amplias y los patrones de varios componentes.

Entregables esperados

Una especificación de anatomía y variantes
Una tabla de props con tipos, valores por defecto y estado de obligatoriedad
Reglas de estados, comportamiento, accesibilidad y uso

Ver el brief de ejemplo

Del brief a la revisión

01
Define los límites del componente
Define su propósito, cuándo usarlo y qué partes son obligatorias u opcionales.
02
Especifica API y estados
Nombra las propiedades y variantes y describe el comportamiento por defecto, con foco, deshabilitado, de carga y, si procede, de error.
03
Resuelve los detalles de interacción
Documenta el comportamiento de teclado, foco, adaptación a distintos tamaños de pantalla y casos límite con ejemplos que la implementación pueda comprobar.

02 Cuándo usarlo

Cuándo usarla

Indica el propósito del componente, sus variantes visuales y la plataforma de destino. El resultado es una especificación para implementar y probar, no un componente implementado.

Buen encaje

Un componente nuevo de la bibliotecaÚsala antes de que varios equipos implementen versiones rivales del mismo control.
Un traspaso ambiguoAclara qué cambia entre variantes y cómo se comportan las transiciones de estado.

Límites a tener en cuenta

No es toda la bibliotecaEl alcance es un componente, no la arquitectura completa de un sistema de diseño.
Especificar no es implementarUna regla de accesibilidad escrita aún debe implementarse y probarse.

Aporta estos datos

Propósito del componenteIndica la tarea del usuario y los controles relacionados.
Ejemplos existentesAporta las variantes visuales y el comportamiento actual.
Contrato de plataformaIdentifica el framework, los métodos de entrada y las expectativas de accesibilidad.

03 Decisiones importantes

Decisiones que importan

El comportamiento es de primera clase
Los estados y las transiciones pasan a formar parte del traspaso en lugar de quedar a la suposición del desarrollador.
Vocabulario compartido
Los nombres de props y las etiquetas de anatomía conectan las decisiones de diseño con la implementación.

04 Ejemplo de brief

Prueba un brief concreto

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

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills que admita tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md

Indica el propósito del componente, sus variantes visuales y la plataforma de destino. El resultado es una especificación para implementar y probar, no un componente implementado.

Empieza con un entregable

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

Brief de ejemplo

Usa component-spec para documentar nuestro botón de envío asíncrono. Especifica anatomía, tamaños, props, foco, carga, estado deshabilitado y comportamiento de error. Explica los clics repetidos y la activación con teclado, e incluye cuándo debe usarse un enlace en su lugar. No afirmes que el componente ya está implementado.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Las propiedades tienen valores por defecto y requisitos explícitos.
Cada estado relevante tiene un ejemplo de comportamiento.
Las expectativas de teclado y foco se pueden probar.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Que aparezca en este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales o dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

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

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: design-systems/skills/component-spec/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Un contrato para un solo componente que cubre anatomía, API, variantes, estados de interacción, accesibilidad y uso.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Generará código de producción?

Está pensada para producir una especificación que los desarrolladores puedan implementar. Construir y probar el componente son pasos aparte.

¿Incluye accesibilidad?

Sí. Los roles, la navegación con teclado, el comportamiento con lectores de pantalla y la gestión del foco son secciones explícitas.

¿En qué se diferencia de una biblioteca de patrones?

Especifica un único componente; un patrón describe una combinación más amplia de problema y solución.

OpenDesign

Deja espacio para la próxima iteración de diseño.

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

Descargar OpenDesign Explorar skills de diseño