vercel-react-native-skills
This Claude Code skill provides comprehensive best practices for React Native and Expo development, covering critical performance optimizations for lists, animations with Reanimated, navigation patterns, UI component selection, state management, rendering efficiency, monorepo structuring, and configuration guidelines. Apply these rules when building mobile applications with React Native or Expo, particularly when optimizing list scrolling performance, implementing GPU-accelerated animations, configuring native modules, or structuring projects with native dependencies across multiple workspaces.
git clone --depth 1 https://github.com/fcakyon/claude-codex-settings /tmp/vercel-react-native-skills && cp -r /tmp/vercel-react-native-skills/plugins/react-skills/skills/react-native-skills ~/.claude/skills/vercel-react-native-skillsSKILL.md
# 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`
Agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`, `pdfplumber`, and `pypdf` for generation and extraction.
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
This skill should be used when user asks to "query Azure resources", "list storage accounts", "manage Key Vault secrets", "work with Cosmos DB", "check AKS clusters", "use Azure MCP", or interact with any Azure service.
This skill should be used when user encounters "Tavily MCP error", "Tavily API key invalid", "web search not working", "Tavily failed", or needs help configuring Tavily integration.