Dokumentations-Generator für Design-System-Komponenten

Du bist ein Design-Systems-Experte, der an den Design Systems von Atlassian, Shopify und IBM gearbeitet hat. Deine Dokumentation ist bekannt dafür, klar, umfassend und entwicklerfreundlich zu sein. Ich brauche eine vollständige Dokumentation für eine Design-System-Komponente. ## Informationen zur Komponente Name der Komponente: [KOMPONENTENNAME] Komponententyp: [z. B. Button, Input, Modal, Card usw.] Name des Design Systems: [NAME_DEINES_DESIGN_SYSTEMS] Tech-Stack: [z. B. React + TypeScript, Vue usw.] ## Erstelle die Dokumentation mit diesen Abschnitten: ### 1. ÜBERBLICK - Ein-Satz-Beschreibung, was die Komponente macht - Wann diese Komponente verwendet werden sollte (2-3 Stichpunkte) - Wann diese Komponente NICHT verwendet werden sollte (mit Alternativen) - Beschreibung des visuellen Beispiels (beschreibe den Standardzustand) ### 2. ANATOMIE Beschreibe jeden Teil der Komponente: - Container/Wrapper - Icon (falls zutreffend) - Label/Text - Unterstützende Elemente - Interaktive Zustände Verwende ein nummeriertes Diagrammformat: "1. Container - Der äußere Wrapper, der alle Elemente enthält..." ### 3. VARIANTEN Gib für jede Variante an: - Name der Variante - Anwendungsfall (wann diese Variante verwendet werden sollte) - Visuelle Beschreibung - Beispielszenario Häufige Varianten, die berücksichtigt werden sollten: - Größenvarianten (small, medium, large) - Stilvarianten (primary, secondary, ghost, outline) - Zustandsvarianten (default, hover, active, disabled, loading) ### 4. PROPS / API Erstelle eine Props-Tabelle mit den Spalten: | Prop | Typ | Standardwert | Erforderlich | Beschreibung | Enthalte: - Alle Anpassungs-Props - Event-Handler (onClick, onChange usw.) - Barrierefreiheits-Props (aria-label usw.) - Props zum Überschreiben von Styles ### 5. NUTZUNGSRICHTLINIEN #### Tue: - Liste 4-5 Best Practices mit Erklärungen auf - Füge die Begründung für jede Richtlinie hinzu #### Tue nicht: - Liste 4-5 zu vermeidende Anti-Patterns auf - Erkläre, warum jedes davon problematisch ist ### 6. BARRIEREFREIHEIT (A11Y) - Anforderungen an die Tastaturnavigation - Überlegungen zu Screenreadern - Benötigte ARIA-Attribute - Anforderungen an den Farbkontrast - Fokusmanagement - Größen der Touch-Ziele (Mobile) ### 7. CODEBEISPIELE Liefere 3-4 Codebeispiele: Beispiel 1: Grundlegende Verwendung ```[language] // Einfache Implementierung nur mit den erforderlichen Props ``` Beispiel 2: Mit allen Optionen ```[language] // Vollständige Implementierung, die alle Props zeigt ``` Beispiel 3: Häufiges Muster ```[language] // Praxisnahes Nutzungsmuster (z. B. in einem Formular) ``` Beispiel 4: Komposition ```[language] // Wie man sie mit anderen Komponenten kombiniert ``` ### 8. VERWANDTE KOMPONENTEN Liste 3-5 verwandte Komponenten auf mit: - Name der Komponente - Beziehung (z. B. „wird oft zusammen verwendet", „Alternative für...") - Platzhalter für Link ### 9. CHANGELOG Erstelle eine Vorlage für den Versionsverlauf: | Version | Datum | Änderungen | |---------|------|---------| | 1.0.0 | JJJJ-MM-TT | Erste Veröffentlichung | ### 10. FIGMA / DESIGN-SPEZIFIKATIONEN Enthalte Platzhalter für: - Link zur Figma-Komponente - Abstandsspezifikationen - Typografie-Spezifikationen - Verwendete Color Tokens Gestalte die Dokumentation gut überfliegbar mit klaren Überschriften, Tabellen und Codeblöcken. Verwende einen freundlichen, aber professionellen Ton. Füge, wo passend, hilfreiche Tipps in Hinweisboxen ein.