Nejlepší React a React Native skills pro Claude Code
React a React Native skills, které hlídají osvědčené postupy, chytají výkonnostní problémy a generují čistý kód komponent.
Matyas Prochazka
8. března 2026
8 min čtení
React skills
Tyhle skills najdete v repozitářích jako antigravity-awesome-skills (přes 1 300 skills), VoltAgent/awesome-agent-skills (500+ skills) a v oficiálním anthropics/skills.
1. React Performance
Chytá běžné výkonnostní problémy dřív, než se dostanou do produkce:
- Detekce zbytečných re-renderů
- Chybějící memoizace (useMemo, useCallback, React.memo)
- Optimalizace velikosti bundlu přes dynamické importy
- Lazy loading strategie pro routy a komponenty
- Virtualizované seznamy pro velké datové sady
2. Component Architecture
Hlídá čisté a udržovatelné vzory komponent:
- Kompozice místo dědičnosti
- Pravidla pro extrakci custom hooků
- Prop drilling vs context vs state management, kdy co použít
- Umístění error boundaries
- Suspense boundaries pro načítání dat
3. State Management
Pomáhá s rozhodováním o správě stavu podle situace:
- Kdy použít lokální vs globální stav
- Zustand vs Jotai vs Context, srovnání
- Server state s TanStack Query
- URL stav pro filtry, stránkování a vyhledávání
- Stav formuláře s Formikem nebo React Hook Form
React Native skills
4. React Native Performance
Mobilní optimalizace z alirezarezvani/claude-skills:
- FlatList vs ScrollView rozhodování (a FlashList alternativy)
- Kešování obrázků přes expo-image
- 60fps animace s Reanimated 3
- Prevence úniků paměti
- Optimalizace enginu Hermes
- Bridging nativních modulů podle potřeby
5. Expo Expert
Hluboké znalosti Expa, obzvlášť užitečné s rohitg00/awesome-claude-code-toolkit:
- Konfigurace a profily EAS buildů
- Push notifikace (Expo Notifications + FCM/APNs)
- Deep linking a universal links
- Checklisty pro publikaci na App Store a Google Play
- OTA aktualizace přes expo-updates
- File-based routing v Expo Routeru
6. Mobile UI Patterns
Z marketplace SkillsMP:
- Platformově specifický design (iOS Human Interface vs Material Design)
- Bottom sheet vzory
- Pull-to-refresh implementace
- Použití haptické zpětné vazby
- Správa safe area
Můj setup na React Native projekty
Nahrané skills:
1. React Native Performance
2. Expo Expert
3. TypeScript Strict
4. UI/UX Pro Max (mobilní varianta)S touhle kombinací Claude Code generuje React Native kód, který je výkonný, typově bezpečný a drží se konvencí dané platformy.
Na co si dát pozor
- Nepoužívejte webové skills na React Native, mobil má jiné výkonnostní nároky
- Vždycky testujte na reálných zařízeních, Claude neodchytí problémy specifické pro hardware
- Na nativní vývoj použijte platformově specifické skills pro iOS (SwiftUI) a Android
- Udržujte skills aktuální, ekosystém se vyvíjí rychle
