Identifizieren und extrahieren Sie wiederverwendbare Komponenten, Design-Tokens und Muster aus Ihrer Codebasis in ein strukturiertes Design-System. Diese Fähigkeit konsolidiert verteilten UI-Code in systematische, dokumentierte Assets.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "extract". extract target=buttons
Erwartetes Ergebnis:
- 3 Button-Implementierungen in der Codebasis gefunden:
- - PrimaryButton (12 Mal verwendet)
- - SecondaryButton (8 Mal verwendet)
- - IconButton (5 Mal verwendet)
- Empfehlung: Einheitliche Button-Komponente mit variant-Prop erstellen
Verwendung von "extract". extract target=colors
Erwartetes Ergebnis:
- 15 eindeutige Farbwerte extrahiert:
- - Primary: #3B82F6 (45 Mal verwendet)
- - Secondary: #8B5CF6 (23 Mal verwendet)
- - 13 zusätzliche Farben für spezifische Anwendungsfälle
- Tokens erstellt: color-primary, color-secondary, color-success, color-warning, color-error
Sicherheitsaudit
SicherAll 19 static findings are false positives. The skill is a benign design system extraction tool that analyzes code for reusable patterns. The flagged 'weak cryptographic algorithm' patterns are simply markdown text in descriptions and instructions (e.g., YAML frontmatter, section headers). No actual cryptographic code or security vulnerabilities exist.
Qualitätsbewertung
Was du bauen kannst
Komponenten-Konsolidierung
Finden und extrahieren Sie wiederholte Button-, Card-, Input- und andere UI-Muster, die über die Codebasis verteilt sind, in eine einzige Komponentenbibliothek.
Design-Token-Erstellung
Extrahieren Sie hartkodierte Farben, Abstände, Typografie und Schattenwerte in ein strukturiertes Design-Token-System.
Migrations-Automatisierung
Ersetzen Sie alte Implementierungen systematisch durch neue Design-System-Komponenten unter Beibehaltung der Funktionalität.
Probiere diese Prompts
Use the extract skill to find reusable patterns in the authentication feature. Look for repeated buttons, form inputs, and layout patterns.
Run extract to identify all hard-coded color values, spacing units, and typography styles in the codebase and organize them into design tokens.
Use extract to analyze the ui/ directory, identify components that should be shared, and create a plan for consolidating them.
Run extract without a target to scan the entire codebase, identify all extraction opportunities, and prioritize by usage frequency and maintenance benefit.
Bewährte Verfahren
- Muster extrahieren, die 3+ Mal verwendet werden oder eindeutig Wiederverwendungspotenzial haben
- Bestehende Design-System-Konventionen für Benennung und Struktur befolgen
- Immer richtige TypeScript-Typen und Dokumentation für neue Komponenten erstellen
Vermeiden
- Einmalige Implementierungen ohne Verallgemeinerung extrahieren
- Übermäßig generische Komponenten erstellen, die schwer zu verwenden sind
- Barrierefreiheit (ARIA, Tastaturnavigation) in extrahierten Komponenten überspringen