La création d'interfaces web et natives cohérentes avec Tamagui nécessite de comprendre l'optimisation du compilateur, les jetons de conception et les modèles spécifiques à chaque plateforme. Cette compétence fournit des modèles experts pour la configuration v4, les composants composés, les animations et les superpositions accessibles.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「tamagui-best-practices」を使用しています。 Créer un composant Button composé avec des variantes de taille et du texte stylisé
期待される結果:
- ButtonFrame avec createStyledContext({ size: '$medium' })
- Variantes de taille utilisant l'opérateur spread '...size' pour le mappage des jetons
- ButtonText avec le même contexte pour la synchronisation automatique des variantes
- withStaticProperties pour la composition : Button.Props, Button.Text
- Utilisation : <Button size="$large"><Button.Text>Click</Button.Text></Button>
セキュリティ監査
安全Pure documentation skill containing only markdown files with code examples. No executable code, scripts, network calls, file system access, or external command execution. All content is static pattern documentation for the Tamagui UI framework.
品質スコア
作れるもの
Créer une UI native
Créer des interfaces iOS et Android avec des animations, des sheets et un style optimisé natif Tamagui
Partager du code UI entre plateformes
Maintenir une base de code unique pour le web et le natif avec l'optimisation du compilateur et les jetons de conception
Créer des superpositions accessibles
Implémenter des composants Dialog, Popover et Select avec une accessibilité appropriée et les modèles Adapt
これらのプロンプトを試す
Aidez-moi à configurer Tamagui config v4 avec createTamagui, des thèmes personnalisés utilisant createThemes, et les paramètres recommandés pour la compatibilité React Native
Créez un composant Button avec des composants composés (Button.Text, Button.Icon) en utilisant createStyledContext et le modèle withStaticProperties
Construisez un composant Dialog qui s'adapte en Sheet sur les appareils tactiles utilisant le modèle Adapt, avec une animation et une accessibilité appropriées
Analysez mon code de composant et identifiez les modèles qui cassent l'optimisation du compilateur. Montrez comment corriger les styles dynamiques et activer l'extraction complète
ベストプラクティス
- Utilisez des variantes avec des opérateurs de spread ('...size', '...fontSize') au lieu de fonctions inline pour l'optimisation du compilateur
- Appliquez les animations aux composants Content (Dialog.Content, Sheet.Frame), jamais aux conteneurs Portal
- Utilisez le modèle Adapt pour les appareils tactiles au lieu de Platform.OS dans Dialog, Sheet, Popover
回避
- Évitez les objets style inline avec des valeurs dynamiques - cela casse l'extraction et l'optimisation du compilateur
- Ne méliez pas React Native StyleSheet avec les jetons Tamagui - les valeurs ne seront pas résolues correctement
- Évitez de créer des fonctions dans le render ou de propager des props inconnues - empêche l'optimisation