PlugWiki

react-native-architecture Skill (wshobson): Expo Patterns

Gives Claude a set of React Native and Expo patterns for navigation, auth, offline sync, native modules and release builds.

Installs
15.4K
on skills.sh
Stars
42.1K
on GitHub
Files
1
besides SKILL.md
Updated
Oct 2026
last repo commit

react-native-architecture makes Claude follow a fixed set of React Native patterns when you start an Expo project, plan navigation, add native integrations or build offline-first screens. The SKILL.md gives the project layout, an Expo versus bare comparison and a quick start. Longer worked examples sit in references/details.md.

The quick start runs npx create-expo-app and npx expo install commands, and the details file shows EAS build, submit and update commands. Check each before it runs, since builds and submits act on your Expo and store accounts.

Good for

  • Developers starting a new React Native or Expo app
  • Teams adding offline-first behavior or native modules
  • Mobile developers setting up EAS builds and store submits

Install react-native-architecture

Claude Code

  1. 1

    Copy this prompt.

    Install the react-native-architecture skill in Claude Code. Run this command:

/plugin marketplace add wshobson/agents
/plugin install frontend-mobile-development@claude-code-workflows

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

The plugin route installs the whole frontend-mobile-development plugin: 4 skills, 2 agents and 1 command (counted from the repo tree). The skills-only routes install just this skill without the agents, commands or hooks, per the README. Pick one route, not both.

From the project README. Source.

What's in the skill

When it loads

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

Sections in SKILL.md

  1. When to Use This Skill
  2. Core Concepts
  3. 1. Project Structure
  4. 2. Expo vs Bare React Native
  5. Quick Start
  6. Detailed patterns and worked examples
  7. Best Practices
  8. Do's
  9. Don'ts

Key facts

Author
wshobson (repo owner)
Repo
wshobson/agents
Installs on skills.sh
15,365
Repo stars
42,081
License
MIT
Last repo commit
2026-10-30
Files in the skill folder
2 files including SKILL.md

What it includes

  • A suggested src/ layout with Expo Router, components, hooks, services and stores

    Shows where screens, UI components, feature components, hooks, API services and state stores go.

    Project Structure

  • A comparison table of setup, native modules, OTA updates and builds

    Helps decide between Expo with config plugins and a bare project.

    Expo vs Bare React Native

  • Create an Expo project and install the core packages

    Runs npx create-expo-app and npx expo install for router, safe-area, async storage, secure store and haptics, then shows a root layout.

    Runs code · Quick Start

  • File-based navigation worked example

    In references/details.md.

    Pattern 1: Expo Router Navigation

  • Sign-in flow worked example

    In references/details.md.

    Pattern 2: Authentication Flow

  • Cache and sync worked example

    In references/details.md.

    Pattern 3: Offline-First with React Query

  • Calling platform APIs from JavaScript

    In references/details.md.

    Pattern 4: Native Module Integration

  • Handle iOS and Android differences

    In references/details.md.

    Pattern 5: Platform-Specific Code

  • Speed up lists and renders

    In references/details.md.

    Pattern 6: Performance Optimization

  • Build, submit and ship over-the-air updates

    Shows eas build, eas submit and eas update commands and an eas.json file.

    Runs code · EAS Build & Submit

  • Do's and don'ts for Expo apps

    Includes using FlashList over FlatList, Reanimated for animations, and keeping secrets out of code.

    Best Practices

From the official docs

Permissions

Low risk

The skill bundles no scripts, but its examples run package installs and EAS release commands. Approve those commands one at a time instead of letting Claude run them unattended.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Quick start installs npm packages

    The SKILL.md quick start runs npx create-expo-app and npx expo install. Review the packages before you let Claude run them in a real project. github.com

  • EAS commands act on your accounts

    references/details.md shows eas build, eas submit and eas update, plus an eas.json with store account fields. Run these yourself, or approve them one at a time. github.com

Technical details
Talks tonpm registry (package installs). Expo EAS services if you run the EAS commands

Questions

What does the react-native-architecture skill do?

It gives Claude a project layout and patterns for React Native with Expo, covering navigation, auth, offline-first data with React Query, native modules, platform-specific code and performance.

When does Claude use it?

The description says to use it when developing mobile apps, implementing native integrations or architecting React Native projects. Its own list adds new Expo projects, navigation, offline-first apps, performance work and CI/CD for mobile releases.

Do I need Expo?

The skill recommends Expo for faster development, OTA updates and managed native code. It also includes a comparison with bare React Native, so you can pick either.

How do I install it?

Use the install box above. The folder has SKILL.md and references/details.md, 2 files in all. The wshobson/agents README also documents a plugin route and a skills-only route.

Is it safe to install?

It bundles no scripts, only two markdown files. The examples inside run npm installs and EAS build and submit commands, so approve those commands one at a time.

Does it work outside Claude Code?

The wshobson/agents README lists Claude Code, Codex CLI, Cursor, OpenCode, Antigravity CLI, GitHub Copilot and Pi as supported tools, each with its own install route. It does not test this skill in each one.

Information

updated Nov 2, 2026

Repository
wshobson/agents
Folder
plugins/frontend-mobile-development/skills/react-native-architecture

wshobson/agentsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3
  1. wshobson/agents README · github.com
  2. react-native-architecture SKILL.md · github.com
  3. react-native-architecture references/details.md · github.com

Updated Nov 2, 2026.