Expo Skills vs Vercel Agent Skills

Expo Skills

Official AI agent skills from the Expo team for building, deploying, upgrading, and debugging Expo apps.

How It Works

Skills give AI agents focused Expo knowledge: when to use Expo APIs, how to structure common workflows, and which Expo, EAS, React Native, iOS, and Android constraints matter. Expo documentation, Expo CLI, and EAS CLI remain the source of truth; these skills help agents apply them correctly.

Installation

For Claude Code or Codex, install the plugin so updates are handled by the official plugin marketplace. For Cursor, OpenCode, and other AI coding agents, use the skills CLI.

Skills CLI

Install all Expo skills with the skills CLI:

npx skills@latest add expo/skills --skill '*'

This selects every Expo skill without selecting every agent. The CLI will still ask where to install them; to target one agent directly, add --agent <agent>.

For most agents, this is the only install command you need. Run it from the project root, then restart or refresh your agent session so it can discover the installed SKILL.md files.

Claude Code Plugin

Install from the official Claude Code plugin marketplace:

claude plugin install expo@claude-plugins-official

You can also run /plugin install expo@claude-plugins-official inside Claude Code.

Codex Plugin

Install from the OpenAI-curated Codex marketplace:

codex plugin add expo@openai-curated

You can also open /plugins in Codex and install expo from the OpenAI-curated marketplace.

Updating

Claude Code and Codex plugin installs are updated through their official plugin marketplaces.

For skills CLI installs, update installed skills with:

npx skills@latest update

To update a single Expo skill, pass its name:

npx skills@latest update expo-router

Try It

After installing, ask your agent Expo-specific questions like:

• "Build a native-feeling Expo Router screen with tabs, modals, and animations."
• "Create an EAS workflow that builds previews on pull requests."
• "Help me upgrade this app to the latest Expo SDK."
• "Check whether this EAS Update rollout is healthy."

Agents choose the right skill from the task context and each skill's description.

Skills Included

Skills come in two groups so the free vs paid boundary is clear. Each skill's description carries the same label, and every services skill opens with a costs/plan-limits note.

Start Here

Load this first for any Expo/EAS task, then route to the specific skill below.

Framework (open source)

Free, open-source Expo SDK and React Native skills.

Services & paid distribution

Skills whose core purpose uses paid Expo Application Services (EAS).

Experimental

Skills for Expo APIs that are not finalized. Content may change or be retired; skills graduate to the groups above when the underlying API stabilizes. These ship in the separate expo-experiments plugin (install it alongside expo), or individually via the skills CLI.

Expo MCP Server

Skills teach an agent how Expo work gets done. The Expo MCP server gives it live access to actually do that work: read the latest Expo docs on demand, install compatible dependencies with npx expo install, trigger and monitor EAS builds and workflows, pull crash data from TestFlight, and screenshot a running app in the simulator.

The expo plugin bundles this MCP configuration, so Claude Code and Codex plugin installs wire it up automatically. For other agents, or to add it on its own, follow the Expo MCP setup guide.

FAQ

Which AI coding agents are supported?

Use npx skills@latest add expo/skills --skill '*' for Cursor, OpenCode, GitHub Copilot, Windsurf, Gemini, Cline, AMP, Factory Droid, Antigravity, Kiro CLI, and similar AI coding tools.

Should I install the skills or the plugin?

Use the plugin for Claude Code or Codex; it stays updated through the plugin marketplace. Use npx skills@latest add expo/skills --skill '*' for Cursor, OpenCode, and other AI coding agents.

What is the source of truth?

Expo documentation, Expo CLI, and EAS CLI are the source of truth. These skills teach agents how to apply Expo guidance in real projects.

Feedback

Every skill includes instructions to submit specific, actionable feedback with npx --yes @expo/agent-cli@latest feedback.

License

MIT

Agent Skills

A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.

Skills follow the Agent Skills format.

Available Skills

vercel-optimize

Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.

Use when:

• Optimizing a deployed Vercel project
• Reducing Vercel costs or function usage
• Investigating slow or expensive routes
• Finding caching, ISR, middleware, image, or build-minute issues
• Producing a ranked cost and performance report

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.

Use when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Optimizing bundle size or load times

Categories covered:

• Eliminating waterfalls (Critical)
• Bundle size optimization (Critical)
• Server-side performance (High)
• Client-side data fetching (Medium-High)
• Re-render optimization (Medium)
• Rendering performance (Medium)
• JavaScript micro-optimizations (Low-Medium)

web-design-guidelines

Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.

Use when:

• "Review my UI"
• "Check accessibility"
• "Audit design"
• "Review UX"
• "Check my site against best practices"

Categories covered:

• Accessibility (aria-labels, semantic HTML, keyboard handlers)
• Focus States (visible focus, focus-visible patterns)
• Forms (autocomplete, validation, error handling)
• Animation (prefers-reduced-motion, compositor-friendly transforms)
• Typography (curly quotes, ellipsis, tabular-nums)
• Images (dimensions, lazy loading, alt text)
• Performance (virtualization, layout thrashing, preconnect)
• Navigation & State (URL reflects state, deep-linking)
• Dark Mode & Theming (color-scheme, theme-color meta)
• Touch & Interaction (touch-action, tap-highlight)
• Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)

writing-guidelines

Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.

Use when:

• "Review my docs"
• "Check writing style"
• "Audit prose"
• "Review docs voice and tone"
• "Check this page against the writing handbook"

Categories covered:

• Planning (content plan, content type, user-shaped titles)
• Voice & tone (active voice, direct address, banned words like easy/simple/quick)
• Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)
• Headings & structure (sentence case, descriptive subheadings, TL;DR opens)
• Lists (when to use, bold/description format)
• Code (language tags, TypeScript first, <Steps/>, 80-col / 25-line limits)
• Placeholders, units, & numbers (snake_case text, count-up numbers, 64 KB/200 ms)
• Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)
• Source formatting (no hard-wrap, no --- rules, blank line discipline)
• Pricing & money pages (tables, uncompromising detail)
• AI workflow (accountability, enterprise models, plan first, disclose AI use)
• Review (PR description discipline, author accountability)

react-native-guidelines

React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.

Use when:

• Building React Native or Expo apps
• Optimizing mobile performance
• Implementing animations or gestures
• Working with native modules or platform APIs

Categories covered:

• Performance (Critical) - FlashList, memoization, heavy computation
• Layout (High) - flex patterns, safe areas, keyboard handling
• Animation (High) - Reanimated, gesture handling
• Images (Medium) - expo-image, caching, lazy loading
• State Management (Medium) - Zustand patterns, React Compiler
• Architecture (Medium) - monorepo structure, imports
• Platform (Medium) - iOS/Android specific patterns

react-view-transitions

Implement smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, transition types, and Next.js integration including the transitionTypes prop on next/link.

Use when:

• Adding page transitions or route animations
• Animating enter/exit of components
• Creating shared element transitions (list-to-detail morphing)
• Implementing directional (forward/back) navigation animations
• Integrating view transitions in Next.js App Router
• Animating list reorder or Suspense fallback reveals

Topics covered:

• <ViewTransition> component (enter, exit, update, share triggers)
• addTransitionType for directional/context-specific animations
• View Transition Classes and CSS pseudo-elements
• Shared element transitions with the name prop
• JavaScript animations via Web Animations API
• Next.js transitionTypes prop on next/link
• Ready-to-use CSS animation recipes (fade, slide, scale, flip)
• Accessibility (prefers-reduced-motion)

composition-patterns

React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.

Use when:

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible APIs
• Reviewing component architecture

Patterns covered:

• Extracting compound components
• Lifting state to reduce props
• Composing internals for flexibility
• Avoiding prop drilling

deploy-to-vercel

Deploy applications and websites to Vercel. Prefers git-push deploys on a linked project, falls back to the Vercel CLI, and uses vercel deploy --temporary when no login is available. Temporary deployments return a claim URL so users can keep them.

Use when:

• "Deploy my app"
• "Push this live"
• "Deploy and give me the link"
• "Create a preview deployment"

Installation

npx skills add vercel-labs/agent-skills

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Deploy my app

Review this React component for performance issues

Help me optimize this Next.js page

Discovery index

Every change to a skill on main publishes an immutable GitHub release with
an Agent Skills discovery index and one artifact per skill. Build the same
artifacts locally with:

npm ci --ignore-scripts
node scripts/build-discovery-index.mjs https://example.com/skills

Skill Structure

Each skill contains:

• SKILL.md - Instructions for the agent
• scripts/ - Helper scripts for automation (optional)
• references/ - Supporting documentation (optional)

License

MIT