Component Specdi Owl-Listener

Component Spec Skill.

Rendi un componente implementabile spiegandone il comportamento con la stessa cura dell'aspetto.

Design system
Specifiche

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Component SpecSKILL.md

Attività Design system Produce • Una specifica di anatomia e varianti • Una tabella delle props con tipi, valori predefiniti e stato di obbligatorietà • Regole su stati, comportamento, accessibilità e utilizzo Prima di iniziare Fornisci lo scopo del componente, le varianti visive e la piattaforma di destinazione. Il risultato è una specifica per l'implementazione e i test, non un componente implementato.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Component Spec: specificare un singolo componente di libreria

Un contratto per un singolo componente che copre anatomia, API, varianti, stati di interazione, accessibilità e utilizzo.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Component Spec definisce un singolo componente di un design system. Organizza il passaggio di consegne attorno ad anatomia, varianti, proprietà API, stati di interazione, comportamento responsive, accessibilità e utilizzo. Le parti obbligatorie e quelle opzionali sono rese esplicite.

Lo scopo è l'accordo tra designer e sviluppatori. Il comportamento di caricamento di un pulsante o il ritorno del focus in una finestra di dialogo non si ricavano da uno screenshot statico. Per questo la fonte richiede esempi e casi limite, lasciando fuori da questa attività i modelli di documentazione più ampi e i pattern con più componenti.

Risultati attesi

Una specifica di anatomia e varianti
Una tabella delle props con tipi, valori predefiniti e stato di obbligatorietà
Regole su stati, comportamento, accessibilità e utilizzo

Vedi il brief di esempio

Dal brief alla revisione

01
Definisci il perimetro del componente
Definisci lo scopo, quando usarlo e quali parti sono obbligatorie e quali opzionali.
02
Specifica API e stati
Nomina proprietà e varianti, poi descrivi il comportamento predefinito, di focus, disabilitato, di caricamento e, se pertinente, di errore.
03
Risolvi i dettagli di interazione
Documenta il comportamento di tastiera, focus, responsive e casi limite con esempi che l'implementazione possa verificare.

02 Quando usarlo

Quando usarla

Fornisci lo scopo del componente, le varianti visive e la piattaforma di destinazione. Il risultato è una specifica per l'implementazione e i test, non un componente implementato.

Quando è adatta

Un nuovo componente di libreriaDa usare prima che più team implementino versioni concorrenti dello stesso controllo.
Un passaggio di consegne ambiguoChiarisce cosa cambia tra le varianti e come funzionano le transizioni di stato.

Limiti da verificare

Non è l'intera libreriaL'ambito è un singolo componente, non l'architettura completa di un design system.
Specifica non significa implementazioneUna regola di accessibilità scritta deve comunque essere implementata e testata.

Cosa portare

Scopo del componenteIndica l'attività dell'utente e i controlli correlati.
Esempi esistentiFornisci le varianti visive e il comportamento attuale.
Contratto di piattaformaIndica framework, metodi di input e requisiti di accessibilità.

03 Decisioni importanti

Le decisioni che contano

Il comportamento è un elemento primario
Stati e transizioni entrano nel passaggio di consegne invece di restare a discrezione degli sviluppatori.
Vocabolario condiviso
I nomi delle props e le etichette dell'anatomia collegano le decisioni di design all'implementazione.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica il SKILL.md di questa attività dal repository designer-skills nella posizione delle skill supportata dal tuo agente. Il file di ingresso non stabilisce alcun comando di installazione universale.

File sorgente originale

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

Fornisci lo scopo del componente, le varianti visive e la piattaforma di destinazione. Il risultato è una specifica per l'implementazione e i test, non un componente implementato.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa component-spec per documentare il nostro pulsante di invio asincrono. Specifica anatomia, dimensioni, props e comportamento di focus, caricamento, disabilitazione ed errore. Spiega clic ripetuti e attivazione da tastiera, e indica quando usare invece un link. Non affermare che il componente sia già implementato.

Controlla il risultato

Confronta il risultato effettivo con questi criteri osservabili.

Le proprietà hanno valori predefiniti e requisiti espliciti.
Ogni stato rilevante ha un esempio di comportamento.
Le aspettative su tastiera e focus sono verificabili con test.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che ne facciano parte strumenti esterni, credenziali e dipendenze software.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Titolare della fonte: Owl-Listener
Repository: Owl-Listener/designer-skills
File della skill: design-systems/skills/component-spec/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Un contratto per un singolo componente che copre anatomia, API, varianti, stati di interazione, accessibilità e utilizzo.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un segnale di popolarità datato, non misurano l'uso della skill né ne indicano la qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Genera codice di produzione?

Serve a produrre una specifica che gli sviluppatori possano implementare. Sviluppo e test del componente sono passaggi distinti.

Include l'accessibilità?

Sì. Ruoli, navigazione da tastiera, comportamento con screen reader e gestione del focus sono sezioni esplicite.

In cosa si differenzia da una libreria di pattern?

Specifica un solo componente; un pattern descrive invece una soluzione più ampia a un problema.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design