feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
121
skills/vercel-react-native-skills/SKILL.md
Normal file
121
skills/vercel-react-native-skills/SKILL.md
Normal file
@@ -0,0 +1,121 @@
|
||||
---
|
||||
name: vercel-react-native-skills
|
||||
description:
|
||||
React Native and Expo best practices for building performant mobile apps. Use
|
||||
when building React Native components, optimizing list performance,
|
||||
implementing animations, or working with native modules. Triggers on tasks
|
||||
involving React Native, Expo, mobile performance, or native platform APIs.
|
||||
license: MIT
|
||||
metadata:
|
||||
author: vercel
|
||||
version: '1.0.0'
|
||||
---
|
||||
|
||||
# React Native Skills
|
||||
|
||||
Comprehensive best practices for React Native and Expo applications. Contains
|
||||
rules across multiple categories covering performance, animations, UI patterns,
|
||||
and platform-specific optimizations.
|
||||
|
||||
## When to Apply
|
||||
|
||||
Reference these guidelines when:
|
||||
|
||||
- Building React Native or Expo apps
|
||||
- Optimizing list and scroll performance
|
||||
- Implementing animations with Reanimated
|
||||
- Working with images and media
|
||||
- Configuring native modules or fonts
|
||||
- Structuring monorepo projects with native dependencies
|
||||
|
||||
## Rule Categories by Priority
|
||||
|
||||
| Priority | Category | Impact | Prefix |
|
||||
| -------- | ---------------- | -------- | -------------------- |
|
||||
| 1 | List Performance | CRITICAL | `list-performance-` |
|
||||
| 2 | Animation | HIGH | `animation-` |
|
||||
| 3 | Navigation | HIGH | `navigation-` |
|
||||
| 4 | UI Patterns | HIGH | `ui-` |
|
||||
| 5 | State Management | MEDIUM | `react-state-` |
|
||||
| 6 | Rendering | MEDIUM | `rendering-` |
|
||||
| 7 | Monorepo | MEDIUM | `monorepo-` |
|
||||
| 8 | Configuration | LOW | `fonts-`, `imports-` |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### 1. List Performance (CRITICAL)
|
||||
|
||||
- `list-performance-virtualize` - Use FlashList for large lists
|
||||
- `list-performance-item-memo` - Memoize list item components
|
||||
- `list-performance-callbacks` - Stabilize callback references
|
||||
- `list-performance-inline-objects` - Avoid inline style objects
|
||||
- `list-performance-function-references` - Extract functions outside render
|
||||
- `list-performance-images` - Optimize images in lists
|
||||
- `list-performance-item-expensive` - Move expensive work outside items
|
||||
- `list-performance-item-types` - Use item types for heterogeneous lists
|
||||
|
||||
### 2. Animation (HIGH)
|
||||
|
||||
- `animation-gpu-properties` - Animate only transform and opacity
|
||||
- `animation-derived-value` - Use useDerivedValue for computed animations
|
||||
- `animation-gesture-detector-press` - Use Gesture.Tap instead of Pressable
|
||||
|
||||
### 3. Navigation (HIGH)
|
||||
|
||||
- `navigation-native-navigators` - Use native stack and native tabs over JS navigators
|
||||
|
||||
### 4. UI Patterns (HIGH)
|
||||
|
||||
- `ui-expo-image` - Use expo-image for all images
|
||||
- `ui-image-gallery` - Use Galeria for image lightboxes
|
||||
- `ui-pressable` - Use Pressable over TouchableOpacity
|
||||
- `ui-safe-area-scroll` - Handle safe areas in ScrollViews
|
||||
- `ui-scrollview-content-inset` - Use contentInset for headers
|
||||
- `ui-menus` - Use native context menus
|
||||
- `ui-native-modals` - Use native modals when possible
|
||||
- `ui-measure-views` - Use onLayout, not measure()
|
||||
- `ui-styling` - Use StyleSheet.create or Nativewind
|
||||
|
||||
### 5. State Management (MEDIUM)
|
||||
|
||||
- `react-state-minimize` - Minimize state subscriptions
|
||||
- `react-state-dispatcher` - Use dispatcher pattern for callbacks
|
||||
- `react-state-fallback` - Show fallback on first render
|
||||
- `react-compiler-destructure-functions` - Destructure for React Compiler
|
||||
- `react-compiler-reanimated-shared-values` - Handle shared values with compiler
|
||||
|
||||
### 6. Rendering (MEDIUM)
|
||||
|
||||
- `rendering-text-in-text-component` - Wrap text in Text components
|
||||
- `rendering-no-falsy-and` - Avoid falsy && for conditional rendering
|
||||
|
||||
### 7. Monorepo (MEDIUM)
|
||||
|
||||
- `monorepo-native-deps-in-app` - Keep native dependencies in app package
|
||||
- `monorepo-single-dependency-versions` - Use single versions across packages
|
||||
|
||||
### 8. Configuration (LOW)
|
||||
|
||||
- `fonts-config-plugin` - Use config plugins for custom fonts
|
||||
- `imports-design-system-folder` - Organize design system imports
|
||||
- `js-hoist-intl` - Hoist Intl object creation
|
||||
|
||||
## How to Use
|
||||
|
||||
Read individual rule files for detailed explanations and code examples:
|
||||
|
||||
```
|
||||
rules/list-performance-virtualize.md
|
||||
rules/animation-gpu-properties.md
|
||||
```
|
||||
|
||||
Each rule file contains:
|
||||
|
||||
- Brief explanation of why it matters
|
||||
- Incorrect code example with explanation
|
||||
- Correct code example with explanation
|
||||
- Additional context and references
|
||||
|
||||
## Full Compiled Document
|
||||
|
||||
For the complete guide with all rules expanded: `AGENTS.md`
|
||||
Reference in New Issue
Block a user