Official agent skill

Expo Project Structure

by expo in expo/skills

Folder structure for a new Expo app. An agent skill from expo/skills.

OfficialMITAuto-check passedMobile

Install Expo Project Structure

skills CLI
$ npx skills add expo/skills --skill expo-project-structure -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install expo/skills expo-project-structure --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/expo/skills/expo-project-structure .claude/skills/expo-project-structure && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
expo-project-structure
GitHub stars
2.7k
Used in
2 other repos
Token cost
~1.5k tokens
SKILL.md length
566 words
Files
2
Skills in repo
26
Repo updated
First seen
Licence
MIT

At a glance

Folder structure for a new Expo app. An agent skill from expo/skills.

  • Laying out a new Expo project with Expo Router
  • SKILL.md covers src/ and src/app, components/ — reusable UI, screens/ — screen bodies and server/ + app/api/ — separate…, plus 4 more sections
  • Calls npx
  • Deciding where a file should live in one

What it does

Expo Project Structure is an agent skill from expo/skills, published by the product's own GitHub organization. Folder structure for a new Expo app. Use when scaffolding or laying out a new Expo project with Expo Router, or deciding where a file should live in one. For new projects only — never restructure an existing app to match.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Mobile, covering Cross-platform mobile apps and File organization. It works with Expo. The repository describes itself as: A collection of AI agent skills for working with Expo projects and Expo Application Services. The licence is MIT.

When your agent uses it

  • Laying out a new Expo project with Expo Router
  • Deciding where a file should live in one

Example prompts

  • “/expo-project-structure”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit d4f4840. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.expo.dev
    • expo.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Expo Project Structure loads about 1.5k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 566 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from expo/skills at commit d4f4840, republished under its MIT licence (© expo). 566 words, ~1,532 tokens.

Download SKILL.mdSave it as .claude/skills/expo-project-structure/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
expo-project-structure
description
Folder structure for a new Expo app. Use when scaffolding or laying out a new Expo project with Expo Router, or deciding where a file should live in one. For new projects only — never restructure an existing app to match.
version
1.0.0
license
MIT

Expo Project Structure

A starting skeleton for a new Expo app — one with no committed folder structure yet.

Apply only to new projects. If the app already has a layout, follow its existing conventions and leave files where they are — a default to start from, never a standard to enforce or migrate toward. When unsure whether a project is new, ask before moving anything.

The whole layout, assembled from the rules below:

├── assets/
├── scripts/
├── src/
│   ├── app/                       # Expo Router routes ONLY — every file is a route
│   │   ├── api/                   #   server API routes, grouped here
│   │   │   ├── user+api.ts
│   │   │   └── settings+api.ts
│   │   ├── _layout.tsx
│   │   ├── _layout.web.tsx         #   platform-specific layout
│   │   ├── index.tsx
│   │   └── settings.tsx
│   ├── components/                 # reusable UI: button, card, table…
│   │   ├── table/                  #   complex component → folder + index.tsx
│   │   │   ├── cell.tsx
│   │   │   └── index.tsx
│   │   ├── bar-chart.tsx
│   │   ├── bar-chart.web.tsx        #   platform-specific variant
│   │   └── button.tsx
│   ├── screens/                    # screen bodies that route files render
│   │   ├── home/
│   │   │   ├── card.tsx            #   used only by Home — not shared
│   │   │   └── index.tsx           #   rendered by src/app/index.tsx
│   │   └── settings.tsx
│   ├── server/                     # server-only helpers used by app/api
│   │   ├── auth.ts
│   │   └── db.ts
│   ├── utils/                      # standalone helpers + colocated tests
│   │   ├── format-date.ts
│   │   └── format-date.test.ts
│   ├── hooks/                      # reusable hooks: use-theme.ts…
│   ├── constants.ts
│   └── theme.ts
├── app.json
├── eas.json
└── package.json

src/ and src/app

Keep app code under src/ to separate it from config files. Expo Router supports both app/ and src/app/ out of the box — to switch, move the folder and restart the bundler. The default template aliases @/* to ./src/* in tsconfig.json.

src/app is routes-only: every file there becomes a route, so nothing else belongs in it. Everything below lives in sibling folders.

components/ — reusable UI

Generic, reused UI (button, card, table) with one named export each. Name files in kebab-case (bar-chart.tsx), matching the default create-expo-app template. When a component grows, give it its own folder with the root in index.tsx and colocate its private sub-components beside it — the import path (@/components/table) stays unchanged.

screens/ — screen bodies

Because app/ files must be routes, complex screen UI that isn't reused has no home there. Once a screen grows big enough to need breaking out to separate components, put it in screens/ and let each route just render its screen:

tsx
import { Home } from "@/screens/home";

export default function HomeScreen() {
  // route-specific concerns only — e.g. read url params here
  return <Home />;
}

Colocate a screen's private components inside its folder (screens/home/components/). A bonus: the same screen can render under multiple routes.

server/ + app/api/ — separate server code

Appending +api to a file in app/ makes it a server API route. Server code is different from frontend code — it runs in a Node-like server environment (deployed with EAS Hosting or on third-party services) and can read secret env vars (process.env.X, not just EXPO_PUBLIC_*). Keep it apart:

  • Group all routes under app/api/ → /api/user, /api/settings. This colocates them and avoids collisions (e.g. a /user screen and a /user route).
  • Put shared server-only helpers in src/server/.
  • Consider ESLint rules that fence +api files and server/ off from frontend-only checks.
Show full SKILL.md (224 more words)Show less

Platform-specific code

Small differences: use Platform.select / Platform.OS. For larger ones, split into platform files instead of inline if/else — bar-chart.tsx + bar-chart.web.tsx, imported extension-free (@/components/bar-chart); Metro picks the right file per target.

  • Props must be identical across variants.
  • A default file (no platform extension) is always required — make it a no-op if the component is single-platform.
  • Supported extensions: .ios, .android, .native, .web.

Colocate styles and tests

  • Styles: keep the StyleSheet.create({ ... }) object at the bottom of the component file rather than in a separate .styles file.
  • Tests: put format-date.test.ts next to format-date.ts (preferred over a separate __tests__/ folder) so tested files are obvious at a glance.

AI and config files

Agent instructions live at the repo root — AGENTS.md / CLAUDE.md, with project skills under .claude/. Other config and assets stay outside src/: app.json / app.config.ts, eas.json, package.json, assets/, and scripts/.


Based on Expo app folder structure best practices by Kadi Kraman. For src/ precedence and alias mechanics, see the Expo docs.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

bash
npx --yes submit-expo-feedback@latest --category skills --subject "expo-project-structure" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

© expo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in plugins/expo/skills/expo-project-structure of expo/skills.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit d4f4840

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in expo/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Expo Project Structure next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Expo Project Structure compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Expo Project Structure this skillexpo/skills2.7k2 repos~1.5kAutomated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
ThemingCode-with-Beto/skills140—~2.5kAutomated safety check: PassNone
InitVB10/vexana154—~734Automated safety check: PassNone
Expo Playground Patternsbpinheiroms/dotfiles108—~9.3kAutomated safety check: PassNone
UniwindCherryHQ/cherry-studio-app4k—~20kAutomated safety check: WarnAGPL-3.0

Similar skills

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    MobileAuto-check passed
  • Theming

    Code-with-Beto/skills

    Scaffold a unified, cross-platform color theme system into an Expo Router app.

    140 GitHub stars~2.5k tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Init

    VB10/vexana

    Set up vexana (the dio-based Flutter networking layer) in a Flutter project — adds the dependency, builds one NetworkManager, an optional error model and the test fixture helper, placed in the…

    154 GitHub stars~734 tokensUpdated 11 days ago
    MobileAuto-check passed
  • Expo Playground Patterns

    bpinheiroms/dotfiles

    Comprehensive UI/animation patterns reference from expo-playground.

    108 GitHub stars~9.3k tokensUpdated 4 mo ago
    MobileAuto-check passed
  • Uniwind

    CherryHQ/cherry-studio-app

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from CherryHQ/cherry-studio-app.

    4k GitHub stars~20k tokensUpdated yesterday
    MobileAuto-check: warnings
  • React Native Expert

    tech-leads-club/agent-skills

    Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.

    7k GitHub stars~3.2k tokensUpdated yesterday
    MobileAuto-check passed

More from expo/skills

All 26 skills in this repo
  • Official

    Check the health of published EAS Update: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel.

    2.7k GitHub starsUsed in 4 repos~3.1k tokens
    Auto-check passed
  • Eas Workflows

    expo/skills

    Official

    Helps understand and write EAS workflow YAML files for Expo projects.

    2.7k GitHub stars~1.2k tokensUpdated 2 days ago
    Auto-check passed
  • Expo App Clip

    expo/skills

    Official

    Add an iOS App Clip target to an Expo app. An agent skill from expo/skills.

    2.7k GitHub starsUsed in 2 repos~2.4k tokens
    Auto-check passed
  • Expo Skill Eval

    expo/skills

    Official

    Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional).

    2.7k GitHub stars~12k tokensUpdated 2 days ago
    Auto-check passed
  • Official

    Submit feedback on an Expo skill—or Expo itself—and control bundled anonymous usage telemetry (off by default / opt-in).

    2.7k GitHub stars~1.3k tokensUpdated 2 days ago
    Auto-check passed
  • Expo Module

    expo/skills

    Official

    Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

    2.7k GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Works with

Categories

Questions about Expo Project Structure

What does Expo Project Structure do?

Folder structure for a new Expo app. An agent skill from expo/skills. Expo Project Structure is an agent skill from expo/skills, published by the product's own GitHub organization. Folder structure for a new Expo app.

When should I use Expo Project Structure?

Expo Project Structure fits situations like: laying out a new Expo project with Expo Router; deciding where a file should live in one.

How do I install Expo Project Structure in Claude Code?

Run `npx skills add expo/skills --skill expo-project-structure -a claude-code`. Or copy the skill folder (plugins/expo/skills/expo-project-structure in expo/skills) into .claude/skills/expo-project-structure in your project. Claude Code loads it when a task matches its description.

How do I install Expo Project Structure in Codex?

Run `npx skills add expo/skills --skill expo-project-structure -a codex`. Or copy the skill folder (plugins/expo/skills/expo-project-structure in expo/skills) into .agents/skills/expo-project-structure in your project. Codex loads it when a task matches its description.

Can I use Expo Project Structure in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add expo/skills --skill expo-project-structure -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/expo-project-structure, .gemini/skills/expo-project-structure, .github/skills/expo-project-structure and .opencode/skills/expo-project-structure in your project.

What does Expo Project Structure need to run?

Going by SKILL.md and its folder, Expo Project Structure needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Expo Project Structure access the network?

SKILL.md names 2 domains. As links in the text: docs.expo.dev and expo.dev. This is read from the text; nothing was executed.

Is Expo Project Structure safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Expo Project Structure use?

Expo Project Structure is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Expo Project Structure use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Expo Project Structure?

Skills that share tags, products or a category with Expo Project Structure: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Theming (Code-with-Beto/skills, 140 stars), Init (VB10/vexana, 154 stars) and Expo Playground Patterns (bpinheiroms/dotfiles, 108 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Expo Project Structure?

expo (a GitHub organization, an official publisher) maintains it in expo/skills, which has 2,685 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 7, 2026.

Source: expo/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.