Fähigkeiten tamagui-best-practices
🎨
tamagui-best-practices
Sicher ⚙️
Externe Befehle🔑
Umgebungsvariablen🌐
Netzwerkzugriff📁
Dateisystemzugriff
Plattformübergreifende UI mit Tamagui erstellen
Auch verfügbar von: 0xBigBoss
Das Erstellen konsistenter Web- und Native-Oberflächen mit Tamagui erfordert das Verständnis von Compiler-Optimierung, Design-Tokens und plattformspezifischen Mustern. Diese Fähigkeit bietet Expertenmuster für Config v4, Compound Components, Animationen und zugängliche Overlays.
Unterstützt: Claude Codex Code(CC)
1
Die Skill-ZIP herunterladen
2
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
3
Einschalten und loslegen
Teste es
Verwendung von "tamagui-best-practices". Create a compound Button component with size variants and styled text
Erwartetes Ergebnis:
- ButtonFrame with createStyledContext({ size: '$medium' })
- Size variants using spread operators for token mapping
- ButtonText with same context for automatic variant sync
- withStaticProperties for composition
- Usage: <Button size="$large"><Button.Text>Click</Button.Text></Button>
Verwendung von "tamagui-best-practices". Set up Dialog that becomes Sheet on mobile
Erwartetes Ergebnis:
- Use Dialog.Adapt pattern for responsive behavior
- Dialog.Portal contains Dialog.Content
- Adapt when="sm" platform="touch" renders Sheet
- Animation on Content, not on Portal container
Sicherheitsaudit
Sicherv3 • 1/16/2026
Pure documentation skill containing only markdown files with code examples. No executable code, scripts, network calls, file system access, or external command execution. All static findings are false positives triggered by documentation patterns (backticks in code blocks, .md file extensions, curl references for fetching docs).
8
Gescannte Dateien
2,634
Analysierte Zeilen
4
befunde
3
Gesamtzahl Audits
Risikofaktoren
⚙️ Externe Befehle (305)
ANIMATION_PATTERNS.md:11-18 ANIMATION_PATTERNS.md:18-24 ANIMATION_PATTERNS.md:24-35 ANIMATION_PATTERNS.md:35-41 ANIMATION_PATTERNS.md:41-47 ANIMATION_PATTERNS.md:47-55 ANIMATION_PATTERNS.md:55-56 ANIMATION_PATTERNS.md:56-57 ANIMATION_PATTERNS.md:57-61 ANIMATION_PATTERNS.md:61-72 ANIMATION_PATTERNS.md:72-76 ANIMATION_PATTERNS.md:76-111 ANIMATION_PATTERNS.md:111-117 ANIMATION_PATTERNS.md:117-123 ANIMATION_PATTERNS.md:123-128 ANIMATION_PATTERNS.md:128 ANIMATION_PATTERNS.md:128-129 ANIMATION_PATTERNS.md:129 ANIMATION_PATTERNS.md:129 ANIMATION_PATTERNS.md:129-130 ANIMATION_PATTERNS.md:130 ANIMATION_PATTERNS.md:130-132 ANIMATION_PATTERNS.md:132-138 ANIMATION_PATTERNS.md:138-165 ANIMATION_PATTERNS.md:165-171 ANIMATION_PATTERNS.md:171-192 ANIMATION_PATTERNS.md:192-196 ANIMATION_PATTERNS.md:196-198 ANIMATION_PATTERNS.md:198-211 ANIMATION_PATTERNS.md:211-217 ANIMATION_PATTERNS.md:217-228 ANIMATION_PATTERNS.md:228-234 ANIMATION_PATTERNS.md:234-240 ANIMATION_PATTERNS.md:240-244 ANIMATION_PATTERNS.md:244-251 ANIMATION_PATTERNS.md:251-255 ANIMATION_PATTERNS.md:255-262 ANIMATION_PATTERNS.md:262-266 ANIMATION_PATTERNS.md:266-273 ANIMATION_PATTERNS.md:273-277 ANIMATION_PATTERNS.md:277-283 ANIMATION_PATTERNS.md:283-291 ANIMATION_PATTERNS.md:291-298 ANIMATION_PATTERNS.md:298-302 ANIMATION_PATTERNS.md:302-309 ANIMATION_PATTERNS.md:309-313 ANIMATION_PATTERNS.md:313-323 ANIMATION_PATTERNS.md:323-327 ANIMATION_PATTERNS.md:327-333 ANIMATION_PATTERNS.md:333-336 COMPILER_PATTERNS.md:3 COMPILER_PATTERNS.md:3 COMPILER_PATTERNS.md:8-11 COMPILER_PATTERNS.md:11-14 COMPILER_PATTERNS.md:14-17 COMPILER_PATTERNS.md:17-20 COMPILER_PATTERNS.md:20-24 COMPILER_PATTERNS.md:24-29 COMPILER_PATTERNS.md:29-41 COMPILER_PATTERNS.md:41-44 COMPILER_PATTERNS.md:44-47 COMPILER_PATTERNS.md:47-50 COMPILER_PATTERNS.md:50-56 COMPILER_PATTERNS.md:56-59 COMPILER_PATTERNS.md:59-64 COMPILER_PATTERNS.md:64-68 COMPILER_PATTERNS.md:68-71 COMPILER_PATTERNS.md:71-76 COMPILER_PATTERNS.md:76-78 COMPILER_PATTERNS.md:78-81 COMPILER_PATTERNS.md:81-83 COMPILER_PATTERNS.md:83-89 COMPILER_PATTERNS.md:89-102 COMPILER_PATTERNS.md:102-106 COMPILER_PATTERNS.md:106-121 COMPILER_PATTERNS.md:121-125 COMPILER_PATTERNS.md:125-135 COMPILER_PATTERNS.md:135-139 COMPILER_PATTERNS.md:139-156 COMPILER_PATTERNS.md:156-162 COMPILER_PATTERNS.md:162-174 COMPILER_PATTERNS.md:174-177 COMPILER_PATTERNS.md:177-187 COMPILER_PATTERNS.md:187-193 COMPILER_PATTERNS.md:193-194 COMPILER_PATTERNS.md:194-195 COMPILER_PATTERNS.md:195-196 COMPILER_PATTERNS.md:196-197 COMPILER_PATTERNS.md:197-198 COMPILER_PATTERNS.md:198-202 COMPILER_PATTERNS.md:202-206 COMPILER_PATTERNS.md:206-210 COMPILER_PATTERNS.md:210-214 COMPILER_PATTERNS.md:214-215 COMPILER_PATTERNS.md:215-217 DESIGN_SYSTEM.md:26-53 DESIGN_SYSTEM.md:53-57 DESIGN_SYSTEM.md:57-68 DESIGN_SYSTEM.md:68-80 DESIGN_SYSTEM.md:80-88 DESIGN_SYSTEM.md:88-113 DESIGN_SYSTEM.md:113-117 DESIGN_SYSTEM.md:117-131 DESIGN_SYSTEM.md:131-135 DESIGN_SYSTEM.md:135-150 DESIGN_SYSTEM.md:150-158 DESIGN_SYSTEM.md:158-159 DESIGN_SYSTEM.md:159-162 DESIGN_SYSTEM.md:162-166 DESIGN_SYSTEM.md:166-170 DESIGN_SYSTEM.md:170-180 DESIGN_SYSTEM.md:180-184 DESIGN_SYSTEM.md:184-196 DESIGN_SYSTEM.md:196-202 DESIGN_SYSTEM.md:202-209 DESIGN_SYSTEM.md:209-214 DESIGN_SYSTEM.md:214-218 DESIGN_SYSTEM.md:218-233 DESIGN_SYSTEM.md:233-239 DESIGN_SYSTEM.md:239-247 DESIGN_SYSTEM.md:247-251 DESIGN_SYSTEM.md:251-259 DESIGN_SYSTEM.md:259-263 DESIGN_SYSTEM.md:263-273 DESIGN_SYSTEM.md:273-277 DESIGN_SYSTEM.md:277-292 DESIGN_SYSTEM.md:292-298 DESIGN_SYSTEM.md:298-309 DESIGN_SYSTEM.md:309-322 DESIGN_SYSTEM.md:322 DESIGN_SYSTEM.md:322 DESIGN_SYSTEM.md:322-324 DESIGN_SYSTEM.md:324-331 DIALOG_PATTERNS.md:11-20 DIALOG_PATTERNS.md:20-26 DIALOG_PATTERNS.md:26 DIALOG_PATTERNS.md:26-28 DIALOG_PATTERNS.md:28-65 DIALOG_PATTERNS.md:65-67 DIALOG_PATTERNS.md:67-73 DIALOG_PATTERNS.md:73-77 DIALOG_PATTERNS.md:77 DIALOG_PATTERNS.md:77-79 DIALOG_PATTERNS.md:79-86 DIALOG_PATTERNS.md:86-92 DIALOG_PATTERNS.md:92-97 DIALOG_PATTERNS.md:97-103 DIALOG_PATTERNS.md:103-163 DIALOG_PATTERNS.md:163-167 DIALOG_PATTERNS.md:167-227 DIALOG_PATTERNS.md:227-233 DIALOG_PATTERNS.md:233-258 DIALOG_PATTERNS.md:258-264 DIALOG_PATTERNS.md:264-265 DIALOG_PATTERNS.md:265-266 DIALOG_PATTERNS.md:266-267 DIALOG_PATTERNS.md:267-268 DIALOG_PATTERNS.md:268-269 DIALOG_PATTERNS.md:269-275 DIALOG_PATTERNS.md:275-280 DIALOG_PATTERNS.md:280-284 DIALOG_PATTERNS.md:284-301 FORM_PATTERNS.md:7 FORM_PATTERNS.md:18 FORM_PATTERNS.md:18 FORM_PATTERNS.md:20-34 FORM_PATTERNS.md:34-40 FORM_PATTERNS.md:40-44 FORM_PATTERNS.md:44-50 FORM_PATTERNS.md:50-58 FORM_PATTERNS.md:58-63 FORM_PATTERNS.md:63 FORM_PATTERNS.md:63-64 FORM_PATTERNS.md:64 FORM_PATTERNS.md:64-70 FORM_PATTERNS.md:70-78 FORM_PATTERNS.md:78-84 FORM_PATTERNS.md:84-206 FORM_PATTERNS.md:206-212 FORM_PATTERNS.md:212-250 FORM_PATTERNS.md:250-256 FORM_PATTERNS.md:256-262 FORM_PATTERNS.md:262-266 FORM_PATTERNS.md:266-274 FORM_PATTERNS.md:274-278 FORM_PATTERNS.md:278-298 FORM_PATTERNS.md:298-302 FORM_PATTERNS.md:302-308 FORM_PATTERNS.md:308-312 FORM_PATTERNS.md:312-333 FORM_PATTERNS.md:333-347 FORM_PATTERNS.md:347-379 OVERLAY_PATTERNS.md:11-31 OVERLAY_PATTERNS.md:31-37 OVERLAY_PATTERNS.md:37-48 OVERLAY_PATTERNS.md:48-54 OVERLAY_PATTERNS.md:54-64 OVERLAY_PATTERNS.md:64-70 OVERLAY_PATTERNS.md:70-109 OVERLAY_PATTERNS.md:109-115 OVERLAY_PATTERNS.md:115 OVERLAY_PATTERNS.md:115 OVERLAY_PATTERNS.md:115 OVERLAY_PATTERNS.md:115 OVERLAY_PATTERNS.md:115-116 OVERLAY_PATTERNS.md:116 OVERLAY_PATTERNS.md:116-117 OVERLAY_PATTERNS.md:117-118 OVERLAY_PATTERNS.md:118-122 OVERLAY_PATTERNS.md:122-131 OVERLAY_PATTERNS.md:131-137 OVERLAY_PATTERNS.md:137-160 OVERLAY_PATTERNS.md:160-166 OVERLAY_PATTERNS.md:166-167 OVERLAY_PATTERNS.md:167-168 OVERLAY_PATTERNS.md:168-174 OVERLAY_PATTERNS.md:174-238 OVERLAY_PATTERNS.md:238-243 OVERLAY_PATTERNS.md:243-244 OVERLAY_PATTERNS.md:244-245 OVERLAY_PATTERNS.md:245-246 OVERLAY_PATTERNS.md:246-247 OVERLAY_PATTERNS.md:247-248 OVERLAY_PATTERNS.md:248-249 OVERLAY_PATTERNS.md:249-250 OVERLAY_PATTERNS.md:250-256 OVERLAY_PATTERNS.md:256-260 OVERLAY_PATTERNS.md:260-264 OVERLAY_PATTERNS.md:264-266 OVERLAY_PATTERNS.md:266-272 OVERLAY_PATTERNS.md:272-278 OVERLAY_PATTERNS.md:278-282 OVERLAY_PATTERNS.md:282-290 OVERLAY_PATTERNS.md:290-333 OVERLAY_PATTERNS.md:333-337 OVERLAY_PATTERNS.md:337-392 OVERLAY_PATTERNS.md:392-396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396 OVERLAY_PATTERNS.md:396-398 OVERLAY_PATTERNS.md:398-407 OVERLAY_PATTERNS.md:407-419 OVERLAY_PATTERNS.md:419-452 SKILL.md:15 SKILL.md:23 SKILL.md:25-37 SKILL.md:37-40 SKILL.md:40-48 SKILL.md:48-52 SKILL.md:52-54 SKILL.md:54-78 SKILL.md:78-84 SKILL.md:84 SKILL.md:84-85 SKILL.md:85 SKILL.md:85-86 SKILL.md:86-92 SKILL.md:92-111 SKILL.md:111-113 SKILL.md:113-117 SKILL.md:117-119 SKILL.md:119-170 SKILL.md:170-173 SKILL.md:173-182 SKILL.md:182-184 SKILL.md:184-188 SKILL.md:188-190 SKILL.md:190-207 SKILL.md:207-213 SKILL.md:213-225 SKILL.md:225-231 SKILL.md:231-245 SKILL.md:245-247 SKILL.md:247-251 SKILL.md:251-253 SKILL.md:253-263 SKILL.md:263-269 SKILL.md:269-281 SKILL.md:281-285 SKILL.md:285-292 SKILL.md:292-296 SKILL.md:296-303 SKILL.md:303-307 SKILL.md:307-314 SKILL.md:314-318 SKILL.md:318-332 SKILL.md:332-338 SKILL.md:338-352 SKILL.md:352-362 SKILL.md:362-363 SKILL.md:363-364 SKILL.md:364-365 SKILL.md:365-366 SKILL.md:366-367 SKILL.md:367-373 SKILL.md:373-374 SKILL.md:374-375 SKILL.md:375-376 SKILL.md:376-377 SKILL.md:377-383 SKILL.md:383-384
🔑 Umgebungsvariablen (8)
🌐 Netzwerkzugriff (9)
📁 Dateisystemzugriff (1)
Auditiert von: claude Audit-Verlauf anzeigen →
Qualitätsbewertung
38
Architektur
100
Wartbarkeit
85
Inhalt
20
Community
100
Sicherheit
91
Spezifikationskonformität
Was du bauen kannst
Native-First UI erstellen
iOS- und Android-Oberflächen mit Tamagui-Animationen, Sheets und native-optimiertem Styling erstellen
UI-Code über Plattformen teilen
Single Codebase für Web und Native mit Compiler-Optimierung und Design-Tokens pflegen
Zugängliche Overlays erstellen
Dialog-, Popover- und Select-Komponenten mit richtiger Barrierefreiheit und Adapt-Mustern implementieren
Probiere diese Prompts
Config-Einrichtung
Hilf mir, Tamagui Config v4 mit createTamagui, benutzerdefinierten Themes mit createThemes und empfohlenen Einstellungen für React Native-Kompatibilität einzurichten
Compound Component
Eine Button-Komponente mit Compound Components unter Verwendung von createStyledContext und withStaticProperties-Muster erstellen
Overlay-Muster
Eine Dialog-Komponente erstellen, die sich auf Touch-Geräten automatisch zu einem Sheet transformiert unter Verwendung des Adapt-Musters
Leistungsoptimierung
Meinen Komponenten-Code überprüfen und Muster identifizieren, die die Compiler-Optimierung beeinträchtigen
Bewährte Verfahren
- Varianten mit Spread-Operatoren statt Inline-Funktionen für Compiler-Optimierung verwenden
- Animationen auf Content-Komponenten anwenden, niemals auf Portal-Container
- Adapt-Muster für Touch-Geräte statt Platform.OS-Verzweigungen verwenden
Vermeiden
- Inline-Style-Objekte mit dynamischen Werten vermeiden - beeinträchtigt die Compiler-Extraktion
- React Native StyleSheet nicht mit Tamagui-Tokens mischen
- Funktionen in Render erstellen oder unbekannte Props verteilen vermeiden
Häufig gestellte Fragen
Wie handhabt Tamagui plattformübergreifendes Styling?
Tamagui verwendet Adapt, um Komponenten zwischen Plattformen zu transformieren. Dialog wird auf Touch-Geräten automatisch zu Sheet.
Was ist der Nutzen der Compiler-Optimierung?
Statische Props und Varianten werden zur Build-Zeit in atomares CSS extrahiert, was den Laufzeit-Overhead erheblich reduziert.
Wie erstelle ich benutzerdefinierte Themes?
createThemes mit Palette, accent und childrenThemes für semantische Farbsysteme über Light- und Dark-Modes hinweg verwenden.
Welchen Animationstreiber sollte ich wählen?
CSS-Treiber für Web (kleinstes Bundle), react-native-reanimated für Native Off-Thread-Animationen.
Wie verhindere ich Formularübergabe-Probleme?
Submit-Buttons immer in Form.Trigger mit asChild wrappen. Ohne dies wird onSubmit nicht ausgelöst.
Kann ich Tamagui mit Design-Systemen wie Storybook verwenden?
Ja. Design-Tokens und Komponentenvarianten in Storybook für Team-Konsistenz und Tests dokumentieren.