102.3K+Download
Zur Nutzungsanleitung springen
Component Specvon Owl-Listener

Component Spec Skill.

Eine Komponente umsetzbar machen, indem ihr Verhalten ebenso sorgfältig erklärt wird wie ihr Aussehen.

  • Designsysteme
  • Spezifikationen
OpenDesign herunterladenNutzungsanleitung ansehen
Quellenprüfung · Component SpecSKILL.md
Aufgabe Designsysteme Ergebnis • Eine Spezifikation von Aufbau und Varianten • Eine Props-Tabelle mit Typen, Standardwerten und Pflichtstatus • Regeln zu Zuständen, Verhalten, Barrierefreiheit und Nutzung Bevor Sie starten Geben Sie Zweck, visuelle Varianten und Zielplattform der Komponente an. Das Ergebnis ist eine Spezifikation für Umsetzung und Tests, keine implementierte Komponente.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Component Spec: Eine Bibliothekskomponente spezifizieren

Ein Vertrag für eine einzelne Komponente, der Aufbau, API, Varianten, Interaktionszustände, Barrierefreiheit und Nutzung abdeckt.

Quellenbasierter AblaufKein Ausführungs-Benchmark

Die Arbeitsweise

Component Spec definiert eine einzelne Designsystem-Komponente. Die Übergabe ist nach Aufbau, Varianten, API-Eigenschaften, Interaktionszuständen, responsivem Verhalten, Barrierefreiheit und Nutzung gegliedert. Erforderliche und optionale Teile werden ausdrücklich benannt.

Ziel ist die Abstimmung zwischen Design und Entwicklung. Das Ladeverhalten eines Buttons oder die Rückgabe des Fokus bei einem Dialog lässt sich mit einem statischen Screenshot nicht festhalten. Die Quelle verlangt daher Beispiele und Randfälle; umfassendere Dokumentationsvorlagen und Muster aus mehreren Komponenten gehören nicht zu dieser Aufgabe.

Erwartete Ergebnisse

  • Eine Spezifikation von Aufbau und Varianten
  • Eine Props-Tabelle mit Typen, Standardwerten und Pflichtstatus
  • Regeln zu Zuständen, Verhalten, Barrierefreiheit und Nutzung
Beispielbriefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Komponentengrenzen festlegen

    Zweck, Einsatzzeitpunkt sowie erforderliche und optionale Teile definieren.

  2. 02
    API und Zustände spezifizieren

    Eigenschaften und Varianten benennen und dann das Verhalten im Standard-, Fokus-, deaktivierten und Ladezustand sowie gegebenenfalls das Fehlerverhalten beschreiben.

  3. 03
    Interaktionsdetails klären

    Tastatur-, Fokus-, responsives Verhalten und das Verhalten in Randfällen mit Beispielen dokumentieren, die sich bei der Umsetzung prüfen lassen.

02 Einsatzbereiche

Wann Sie es einsetzen

Geben Sie Zweck, visuelle Varianten und Zielplattform der Komponente an. Das Ergebnis ist eine Spezifikation für Umsetzung und Tests, keine implementierte Komponente.

Gut geeignet

  • Eine neue BibliothekskomponenteEinsetzen, bevor mehrere Teams konkurrierende Versionen desselben Steuerelements umsetzen.
  • Eine unklare ÜbergabeKlären, was sich zwischen Varianten ändert und wie Zustandsübergänge funktionieren.

Grenzen, die Sie prüfen sollten

  • Nicht die ganze BibliothekDer Umfang ist eine einzelne Komponente, keine vollständige Designsystem-Architektur.
  • Spezifikation ist keine ImplementierungEine schriftlich festgehaltene Barrierefreiheitsregel muss weiterhin umgesetzt und getestet werden.

Diese Eingaben mitbringen

  • Zweck der KomponenteDie Nutzeraufgabe und verwandte Steuerelemente benennen.
  • Vorhandene BeispieleVisuelle Varianten und aktuelles Verhalten bereitstellen.
  • PlattformvorgabenFramework, Eingabemethoden und Erwartungen an die Barrierefreiheit angeben.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

  1. Verhalten zählt von Anfang an

    Zustände und Übergänge werden Teil der Übergabe, statt von Entwicklern erraten zu werden.

  2. Gemeinsames Vokabular

    Prop-Namen und Bezeichnungen für den Aufbau verbinden Designentscheidungen mit der Umsetzung.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispielbriefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie die SKILL.md dieser Aufgabe aus dem designer-skills-Repository an dem Ort, den Ihr Agent für Skills unterstützt. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

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

Geben Sie Zweck, visuelle Varianten und Zielplattform der Komponente an. Das Ergebnis ist eine Spezifikation für Umsetzung und Tests, keine implementierte Komponente.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispielbriefing
Verwende component-spec, um unseren asynchronen Absenden-Button zu dokumentieren. Spezifiziere Aufbau, Größen, Props sowie Fokus-, Lade-, deaktiviertes und Fehlerverhalten. Erkläre wiederholte Klicks und Tastaturaktivierung und nenne, wann stattdessen ein Link verwendet werden sollte. Behaupte nicht, dass die Komponente bereits implementiert ist.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

  • Eigenschaften haben ausdrückliche Standardwerte und Anforderungen.
  • Jeder relevante Zustand hat ein Verhaltensbeispiel.
  • Erwartungen an Tastatur und Fokus sind testbar.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Werkzeuge, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill-Datei
design-systems/skills/component-spec/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Ein Vertrag für eine einzelne Komponente, der Aufbau, API, Varianten, Interaktionszustände, Barrierefreiheit und Nutzung abdeckt.

Eigene Zusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erzeugt es Produktionscode?

Es soll eine Spezifikation erstellen, die Entwickler umsetzen können. Das Bauen und Testen der Komponente sind separate Schritte.

Enthält es Barrierefreiheit?

Ja. Rollen, Tastaturnavigation, Screenreader-Verhalten und Fokusverwaltung sind ausdrückliche Abschnitte.

Worin unterscheidet es sich von einer Pattern-Bibliothek?

Es spezifiziert eine Komponente; ein Pattern beschreibt eine breitere Anordnung aus Problem und Lösung.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellenmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md