Die Arbeitsweise
Building Components erklärt die technischen Entscheidungen hinter einer wiederverwendbaren UI-Bibliothek. Der Skill führt einen Agenten zu gezielten Referenzen für Komposition, Tastaturverhalten, Zustandsverwaltung, TypeScript-Schnittstellen und Gestaltung. Der Einstieg behandelt Primitive, Komponenten, Blöcke und Vorlagen, damit die Abstraktionsebene zur tatsächlichen Aufgabe passt.
Der Skill eignet sich für Komponenten, die von mehreren Aufrufern genutzt werden und nicht nur auf einem einzelnen Bildschirm. Er betrachtet API-Form, Barrierefreiheit und Distribution gemeinsam. Die Quelle ist vor allem ein Referenzindex: Die verlinkten Dateien gehören zum einsatzfähigen Skill und sollten mit der Einstiegsdatei vorliegen.
Erwartete Ergebnisse
- Bei einer Implementierungsaufgabe eine Komponente mit explizitem Kompositions- und Zustandsmodell.
- Bei einer Dokumentationsaufgabe eine Anleitung zur Komponenten-API und zum relevanten Verhalten.
- Einen passenden Paketierungs- oder Registry-Plan, wenn Distribution zur Aufgabe gehört.
Vom Briefing zur Prüfung
- 01Den Komponentenvertrag bestimmen
Klären Sie, ob es um ein Primitiv, eine Komponente, einen Block oder eine Vorlage geht. Definieren Sie die öffentliche Schnittstelle und die Kontexte, in denen Aufrufer sie zusammensetzen.
- 02Relevante technische Anleitungen lesen
Lesen Sie state.mdx zu kontrolliertem und unkontrolliertem Verhalten, composition.mdx zum öffentlichen Kompositionsmodell und accessibility.mdx zu Tastatur- und Fokusanforderungen. Ziehen Sie types.mdx und styling.mdx für die Implementierung heran. Ergänzen Sie Referenzen zu Polymorphie oder as-child nur, wenn Aufrufer diese API-Muster brauchen.
- 03Die Schnittstelle implementieren und dokumentieren
Verbinden Sie Zustand und Darstellung über die gewählte API. Erläutern Sie die vorgesehene Nutzung und wählen Sie npm, eine Registry oder einen anderen dokumentierten Verteilungsweg nur bei Bedarf.