web-component-designvon Seth Hobson

Web Component Design Skill.

Ein Claude Code- und Codex-Skill für UI-Design: wiederverwendbare React-, Vue- und Svelte-Komponentenmuster und Kompositionsstrategien.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/web-component-design/SKILL.mdSKILL.md

--- name: web-component-design description: Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems. --- ## When to Use This Skill ## Core Concepts ## Quick Start: React Component with Tailwind ## Framework Patterns ## Best Practices

Einleitungstext und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 7.475 Zeichen insgesamt

01 Was es tut

Was der web-component-design Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Erstellt wiederverwendbare UI-Komponenten für React, Vue und Svelte mit modernen Kompositionsmustern, CSS-in-JS-Lösungen und Prinzipien für das Design von Komponenten-APIs. Umfasst Compound Components, Render Props, Slots sowie framework-spezifische Muster wie React Context, Vue Composables und Svelte Runes. Gilt für Komponentenbibliotheken, Design-Systeme und die Refaktorisierung bestehender Komponenten.

Legt den Schwerpunkt auf standardmäßig barrierefreie Komponenten mit semantischen Props, Single Responsibility, Ref-Weiterleitung sowie kontrollierten und unkontrollierten Mustern. Enthält konkrete Implementierungen für Buttons, Accordions, Selects und Tabs mit class-variance-authority, Tailwind CSS und Ansätzen für gekapseltes Styling.

Was er erzeugt

Design-System-Komponenten, die Buttons, Accordions, Selects, Tabs und Cards mit class-variance-authority und Tailwind CSS umsetzen.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Einen CSS-in-JS-Ansatz wählen
Wählen Sie zwischen Tailwind CSS für schnelles Prototyping, CSS Modules für gekapselte Styles, styled-components für dynamisches React-Styling, Emotion für SSR-freundliche Flexibilität oder Vanilla Extract für Performance ohne Laufzeit-Overhead.
02
Die Komponenten-API entwerfen
Verwenden Sie semantische Prop-Namen wie isLoading statt loading, legen Sie sinnvolle Standardwerte fest, unterstützen Sie Komposition über children und ermöglichen Sie Style-Überschreibungen über die Props className oder style.
03
Framework-spezifische Muster implementieren
Verwenden Sie React Context für Compound Components, Vue-3-Composables mit provide und inject oder Svelte-5-Runes mit $props und $derived für reaktiven State.

02 Finden Sie Ihren Favoriten

Wann Sie den web-component-design-Skill verwenden sollten

Verwenden Sie den web-component-design Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Entwicklung wiederverwendbarer Komponentenbibliotheken oder Design-Systeme für konsistente UI-Muster in einem Produkt oder einer Organisation.
Implementierung komplexer Komponenten-Kompositionsmuster wie Compound Components, Render Props oder Slots für flexible Komponenten-APIs.
Erstellung konsistenter Komponenten-APIs in einer Codebasis zur Standardisierung von Prop-Benennung, Standardwerten und Styling-Konventionen.
Refactoring veralteter Komponenten in moderne Muster mithilfe aktueller Framework-Funktionen und Kompositionsstrategien.
Erstellung zugänglicher, responsiver UI-Komponenten mit integrierter ARIA-Unterstützung und Tastaturnavigation von Anfang an.

Grenzen kennen

Komponenten mit zu vielen Props, die auf einen Bedarf an Kompositionsmustern statt einer einzigen komplexen Komponente hinweisen.

03 Innerhalb des Skills

Regeln, die die web-component-design Skill Claude Code und Codex vorgibt

3 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md dem Agent vorgibt — der Teil der Datei, der das Ergebnis verändert.

Sinnvolle Standardwerte bereitstellen
Komponenten-APIs müssen sinnvolle Standardwerte für optionale Props enthalten, wie im Button-Beispiel mit defaultVariants gezeigt.
Komposition über Children unterstützen
Komponenten müssen children-Props akzeptieren, um flexible Kompositions- und Wiederverwendungsmuster zu ermöglichen.
Style-Überschreibungen zulassen
Jede Komponente muss es übergeordneten Komponenten ermöglichen, Styles über className- oder style-Props zu überschreiben.

04 In Betrieb nehmen

web-component-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

web-component-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/wshobson/agents --skill web-component-design

Generische skills-CLI-Form für plugins/ui-design/skills/web-component-design/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Build a reusable Card component for our React design system that supports compound composition with Card.Header, Card.Content, and Card.Footer subcomponents. Use Tailwind CSS for styling with variants for different card sizes (sm, md, lg) and visual styles (default, outlined, elevated). Include forwardRef support and ensure the component is accessible with proper ARIA labels. Set md size and default style as the defaults.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Testen Sie Komponenten mit Screenreadern und prüfen Sie die vollständige Unterstützung der Tastaturnavigation für die Barrierefreiheit.
Profilieren Sie die Render-Performance mit React DevTools und wenden Sie Memoization an, wo sinnvoll, um unnötige Re-Renders zu vermeiden.

In OpenDesign importieren Sie web-component-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/web-component-design/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für web-component-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann Sie diese Skill verwenden solltenListet sieben Szenarien auf, darunter Komponentenbibliotheken, Kompositionsmuster, CSS-in-JS, Barrierefreiheit und Refactoring.
KernkonzepteBehandelt Kompositionsmuster, eine Vergleichstabelle von CSS-in-JS-Lösungen und Prinzipien für Komponenten-API-Design mit Prop-Benennung.
Schnellstart: React-Komponente mit TailwindVollständige Button-Implementierung mit forwardRef, class-variance-authority, Varianten und Size-Props mit Ladezustand.
Framework-MusterReact Compound Accordion mit Context, Vue 3 Tabs mit Composables und inject, Svelte 5 Button mit Runes.
Best PracticesSieben Praktiken, darunter Single Responsibility, Context-Nutzung, Standard-Barrierefreiheit, kontrollierte Muster, Weiterleitung von Refs und Memoization.
Häufige ProblemeFünf Fallstricke: Prop-Explosion, Stilkonflikte, Re-Render-Kaskaden, Lücken bei der Barrierefreiheit und Bedenken zur Bundle-Größe.

Die eigene Beschreibung des Skills

„Beherrschen Sie React-, Vue- und Svelte-Komponentenmuster einschließlich CSS-in-JS, Kompositionsstrategien und wiederverwendbarer Komponentenarchitektur. Verwenden Sie den Skill beim Aufbau von UI-Komponentenbibliotheken, beim Entwerfen von Komponenten-APIs oder bei der Implementierung von Frontend-Design-Systemen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.475 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Web Component Design

web-component-design für eine echte UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie web-component-design über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen