core-components
Erstellen Sie konsistente Benutzeroberflächen mit Kernkomponenten
Auch verfügbar von: ChrisWiles
Inkonsistente Stile und fragmentierte Komponentennutzung erstellen Wartungsherausforderungen. Dieser Skill bietet ein einheitliches Designsystem mit Tokens und Mustern für kohärente Schnittstellen.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "core-components". Erstellen Sie einen Einstellungsbildschirm-Header mit Titel und Symbol
Erwartetes Ergebnis:
Eine ScreenHeader-Komponente mit dem Titeltext, der die Farbe $textPrimary verwendet, und einem Symbol, das in einem HStack mit $3-Abstand positioniert ist, eingebettet in eine Box mit $4-Padding und $backgroundPrimary-Hintergrund.
Verwendung von "core-components". Stilisieren Sie eine deaktivierte Schaltfläche
Erwartetes Ergebnis:
Eine Button-Komponente mit variant auf solid gesetzt, isDisabled-Prop auf true, was automatisch abgedämpfte Stile unter Verwendung von $textTertiary f��r die Beschriftungsfarbe anwendet.
Sicherheitsaudit
SicherStatic analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
Qualitätsbewertung
Was du bauen kannst
Frontend-Entwickler erstellt neue Funktionen
Ein Entwickler muss einen neuen Einstellungsbildschirm mit Formularen und Listen hinzufügen. Er verwendet diesen Skill, um konsistente Abstands-Tokens, Farb-Tokens und Komponentenmuster anzuwenden, die mit dem vorhandenen Designsystem übereinstimmen.
Team standardisiert UI-Komponenten
Ein Team bemerkt inkonsistente Stile in seiner App. Es verwendet diesen Skill, um gemeinsame Muster für Layouts, Typografie und interaktive Elemente mit Design-Tokens festzulegen.
Code-Reviewer setzt Standards durch
Während des Code-Reviews identifiziert ein Entwickler hard-codierte Werte und rohe Plattformkomponenten. Er verweist auf diesen Skill, um Beitragende zur korrekten Token-Verwendung und Kernkomponenten zu leiten.
Probiere diese Prompts
Zeigen Sie mir, wie Sie eine Kartenkomponente mit Titel und Inhalt mithilfe der Kernkomponentenbibliothek mit entsprechenden Design-Tokens erstellen.
Erstellen Sie ein Anmeldeformular mit E-Mail- und Passwort-Eingaben unter Verwendung von VStack, Input-Komponenten und entsprechenden Abstands-Tokens. Fügen Sie eine Absenden-Schaltfläche hinzu.
Erstellen Sie eine Listenelementkomponente, die einen Benutzer-Avatar, Namen und Untertitel mit einem Chevron-Symbol anzeigt. Verwenden Sie HStack, entsprechende Gap-Tokens und semantische Farb-Tokens für die Texthierarchie.
Überprüfen Sie diesen Komponentencode und identifizieren Sie alle hard-codierten Werte, die Design-Tokens verwenden sollten. Zeigen Sie die korrigierte Version mit entsprechender Token-Verwendung für Abstände, Farben und Typografie.
Bewährte Verfahren
- Verwenden Sie immer Design-Tokens ($4, $textPrimary) statt hard-codierter Werte (16, #333333)
- Importieren Sie aus components/core statt roher react-native-Primitive
- Verwenden Sie HStack und VStack für Layouts statt manueller Flexbox-Konfiguration
Vermeiden
- Verwendung von View und Text aus react-native statt Box und Text aus Kernkomponenten
- Hard-Codierung von Pixelwerten für Abstände, Farben oder Typografie
- Erstellen von Inline-Stilobjekten statt Verwendung von token-basierten Props