core-components
Créer des interfaces cohérentes avec des composants principaux
Également disponible depuis: ChrisWiles
Des styles incohérents et une utilisation fragmentée des composants créent des défis de maintenance. Cette compétence fournit un système de conception unifié avec des jetons et des modèles pour des interfaces cohérentes.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "core-components". Créez un en-tête d'écran de paramètres avec titre et icône
Résultat attendu:
Un composant ScreenHeader avec le texte du titre utilisant la couleur $textPrimary et une icône positionnée dans un HStack avec un écart $3, enveloppé dans un Box avec un padding $4 et un fond $backgroundPrimary.
Utilisation de "core-components". Stylez un bouton désactivé
Résultat attendu:
Un composant Button avec variant défini à solid, la prop isDisabled définie à true, qui applique automatiquement un style atténué en utilisant $textTertiary pour la couleur du label.
Audit de sécurité
SûrStatic 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.
Score de qualité
Ce que vous pouvez construire
Développeur Frontend Créant de Nouvelles Fonctionnalités
Un développeur doit ajouter un nouvel écran de paramètres avec des formulaires et des listes. Il utilise cette compétence pour appliquer des jetons d'espacement, des jetons de couleur et des modèles de composants cohérents avec le système de conception existant.
Équipe Standardisant les Composants UI
Une équipe remarque des styles incohérents dans son application. Elle utilise cette compétence pour établir des modèles partagés pour les mises en page, la typographie et les éléments interactifs en utilisant des jetons de conception.
Relecteur de Code Appliquant les Normes
Lors de la relecture de code, un développeur identifie des valeurs codées en dur et des composants bruts de la plateforme. Il se réfère à cette compétence pour guider les contributeurs vers une utilisation appropriée des jetons et des composants principaux.
Essayez ces prompts
Montrez-moi comment créer un composant carte avec un titre et du contenu en utilisant la bibliothèque de composants principaux avec des jetons de conception appropriés.
Créez un formulaire de connexion avec des champs de saisie pour l'email et le mot de passe en utilisant VStack, les composants Input et des jetons d'espacement appropriés. Incluez un bouton de soumission.
Créez un composant d'élément de liste affichant un avatar d'utilisateur, un nom et un sous-titre avec une icône chevron. Utilisez HStack, des jetons d'écart appropriés et des jetons de couleur sémantiques pour la hiérarchie du texte.
Examinez ce code de composant et identifiez toutes les valeurs codées en dur qui devraient utiliser des jetons de conception. Montrez la version corrigée avec une utilisation appropriée des jetons pour l'espacement, les couleurs et la typographie.
Bonnes pratiques
- Utilisez toujours des jetons de conception ($4, $textPrimary) au lieu de valeurs codées en dur (16, #333333)
- Importez depuis components/core au lieu d'utiliser des primitives react-native brutes
- Utilisez HStack et VStack pour les mises en page au lieu d'une configuration flexbox manuelle
Éviter
- Utiliser View et Text de react-native au lieu de Box et Text des composants principaux
- Coder en dur des valeurs en pixels pour l'espacement, les couleurs ou la typographie
- Créer des objets de style en ligne au lieu d'utiliser des props basées sur des jetons