102.3K+Télécharger
Aller au guide d’utilisation
Component Specpar Owl-Listener

Component Spec Skill.

Rendez un composant implémentable en expliquant son comportement aussi précisément que son apparence.

  • Design systems
  • Spécifications
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Component SpecSKILL.md
Tâche Design systems Produit • Une spécification de l’anatomie et des variantes • Un tableau des props avec types, valeurs par défaut et caractère obligatoire • Des règles d’états, de comportement, d’accessibilité et d’usage Avant de commencer Indiquez l’objectif du composant, ses variantes visuelles et la plateforme cible. Le résultat est une spécification destinée à l’implémentation et aux tests, et non un composant implémenté.
Synthèse éditoriale · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Component Spec : spécifier un composant de bibliothèque

Un contrat pour un seul composant couvrant l’anatomie, les API, les variantes, les états d’interaction, l’accessibilité et l’usage.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Component Spec définit un seul composant de design system. Il organise la transmission autour de l’anatomie, des variantes, des propriétés d’API, des états d’interaction, du comportement responsive, de l’accessibilité et de l’usage. Les parties obligatoires et facultatives sont rendues explicites.

Son but est de mettre designers et développeurs d’accord. Une capture d’écran statique ne rend pas compte du comportement de chargement d’un bouton ni du retour du focus d’une boîte de dialogue. La source demande donc des exemples et des cas limites, tout en laissant en dehors de cette tâche les modèles de documentation plus larges et les patterns multi-composants.

Livrables attendus

  • Une spécification de l’anatomie et des variantes
  • Un tableau des props avec types, valeurs par défaut et caractère obligatoire
  • Des règles d’états, de comportement, d’accessibilité et d’usage
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Définir les limites du composant

    Définissez son objectif, quand l’utiliser, et les parties obligatoires par rapport aux facultatives.

  2. 02
    Spécifier les API et les états

    Nommez les propriétés et les variantes, puis décrivez le comportement par défaut, au focus, désactivé, en chargement et, le cas échéant, en erreur.

  3. 03
    Résoudre les détails d’interaction

    Documentez le comportement au clavier, du focus, responsive et des cas limites avec des exemples que l’implémentation peut vérifier.

02 Cas d’usage

Quand l’utiliser

Indiquez l’objectif du composant, ses variantes visuelles et la plateforme cible. Le résultat est une spécification destinée à l’implémentation et aux tests, et non un composant implémenté.

Un bon cas d’usage

  • Un nouveau composant de bibliothèqueÀ utiliser avant que plusieurs équipes n’implémentent des versions concurrentes du même contrôle.
  • Une transmission ambiguëClarifiez ce qui change d’une variante à l’autre et comment se comportent les transitions d’état.

Limites à vérifier

  • Pas toute la bibliothèqueLe périmètre est un seul composant, et non une architecture complète de design system.
  • Spécification n’est pas implémentationUne règle d’accessibilité rédigée doit encore être implémentée et testée.

Les éléments à fournir

  • Objectif du composantIndiquez la tâche de l’utilisateur et les contrôles associés.
  • Exemples existantsFournissez les variantes visuelles et le comportement actuel.
  • Contrat de plateformePrécisez le framework, les modes de saisie et les attentes en matière d’accessibilité.

03 Décisions importantes

Les décisions qui comptent

  1. Le comportement au premier plan

    Les états et les transitions font partie de la transmission au lieu d’être laissés à l’interprétation des développeurs.

  2. Vocabulaire commun

    Les noms de props et les libellés d’anatomie relient les décisions de design à l’implémentation.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills dans l’emplacement de skills pris en charge par votre agent. Le fichier d’entrée n’établit aucune commande d’installation universelle.

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

Indiquez l’objectif du composant, ses variantes visuelles et la plateforme cible. Le résultat est une spécification destinée à l’implémentation et aux tests, et non un composant implémenté.

Commencer par un seul livrable

Adaptez le périmètre, les documents sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilise component-spec pour documenter notre bouton d’envoi asynchrone. Spécifie l’anatomie, les tailles, les props, le focus, le chargement, l’état désactivé et le comportement en cas d’erreur. Explique les clics répétés et l’activation au clavier, et indique quand utiliser un lien à la place. Ne prétends pas que le composant est déjà implémenté.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Les propriétés ont des valeurs par défaut explicites et un caractère obligatoire ou facultatif explicite.
  • Chaque état pertinent a un exemple de comportement.
  • Les attentes en matière de clavier et de focus peuvent être testées.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de la source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
design-systems/skills/component-spec/SKILL.md
Licence
MIT
Instantané examiné
2026-10-07 · 9a6930cf84a8
Synthèse éditoriale de la source
Un contrat pour un seul composant couvrant l’anatomie, les API, les variantes, les états d’interaction, l’accessibilité et l’usage.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Génère-t-il du code de production ?

Il est conçu pour produire une spécification que les développeurs peuvent implémenter. La création et le test du composant sont des étapes distinctes.

Inclut-il l’accessibilité ?

Oui. Les rôles, la navigation au clavier, le comportement avec les lecteurs d’écran et la gestion du focus font l’objet de sections explicites.

En quoi diffère-t-il d’une bibliothèque de patterns ?

Il spécifie un seul composant ; un pattern décrit un agencement problème-solution plus large.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos documents sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md