web-component-design

Überblick

Was ist web-component-design?

web-component-design ist eine Fähigkeit für Frontend-Entwickler, die sich auf den Aufbau wiederverwendbarer, wartbarer UI-Komponenten mit modernen Frameworks wie React, Vue und Svelte konzentriert. Es bietet praxisnahe Anleitungen zu Kompositionsmustern, CSS-in-JS-Styling, Barrierefreiheits-Standards und der Implementierung von Designsystemen. Diese Fähigkeit ist ideal für Teams und Einzelpersonen, die skalierbare Komponentenbibliotheken, konsistente APIs und robuste Frontend-Architekturen erstellen möchten.

Für wen ist diese Fähigkeit geeignet?

• Frontend-Entwickler, die UI-Komponentenbibliotheken erstellen oder überarbeiten
• Entwickler, die Designsysteme projektübergreifend implementieren
• Teams, die konsistente, barrierefreie und wartbare Komponenten-APIs anstreben
• Alle, die mit React, Vue, Svelte oder CSS-in-JS-Lösungen arbeiten

Welche Probleme werden gelöst?

• Optimiert die Komponentenkomposition für Flexibilität und Wiederverwendbarkeit
• Hilft bei der Auswahl und Umsetzung von CSS-in-JS oder modularen Styling-Ansätzen
• Bietet Barrierefreiheitsmuster für gängige UI-Elemente
• Unterstützt die Migration von veralteten zu modernen Komponentenmustern

Anwendung

Installationsschritte

1. Installieren Sie die Fähigkeit mit:
   npx skills add https://github.com/wshobson/agents --skill web-component-design
2. Beginnen Sie mit der Durchsicht von SKILL.md für einen Überblick über Workflow und Nutzungskontext.
3. Erkunden Sie unterstützende Dateien:
   • references/accessibility-patterns.md für ARIA- und Modal-Dialog-Muster
   • references/component-patterns.md für zusammengesetzte Komponenten und Kontextnutzung
   • references/css-styling-approaches.md zum Vergleich von CSS Modules, Tailwind, styled-components und mehr

Anpassung an Ihr Projekt

• Nutzen Sie die bereitgestellten Beispiele und Referenzen als Inspiration für Ihr eigenes Repository und Ihre Tools.
• Integrieren Sie empfohlene Muster für Komponentenkomposition, Styling und Barrierefreiheit in Ihren Code.
• Passen Sie die Ansätze an das Designsystem und den Frontend-Stack Ihres Teams an.

Wichtige Konzepte

Komponentenkomposition

• Zusammengesetzte Komponenten (z. B. Tabs, Select)
• Render Props für flexible Darstellung
• Slots für Inhaltseinbindung (Vue/Svelte)

Styling-Ansätze

• CSS Modules für scoped Styles
• Tailwind für Utility-First-Styling
• CSS-in-JS-Lösungen wie styled-components und Emotion

Barrierefreiheit

• ARIA-Muster für Modals, Dialoge und interaktive Elemente
• Fokusmanagement und Tastaturnavigation

FAQ

Wo finde ich Implementierungsbeispiele?

Im Ordner references/ finden Sie detaillierte Codebeispiele und Best Practices zu Komponentenmustern, Styling und Barrierefreiheit.

Ist web-component-design für alle Frontend-Projekte geeignet?

Diese Fähigkeit eignet sich besonders für Projekte mit React, Vue oder Svelte sowie für Teams, die wiederverwendbare UI-Bibliotheken oder Designsysteme entwickeln. Für einfache, statische Seiten oder Projekte ohne komponentenbasierte Architektur ist sie möglicherweise nicht erforderlich.

Wie kann ich die vollständige Dateistruktur anzeigen?

Öffnen Sie den Reiter "Files" im Agent Skills Finder, um alle verfügbaren Dateien, einschließlich verschachtelter Referenzen und Hilfsskripte, einzusehen.