skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

expo-project-structure

Defines the folder structure for scaffolding new Expo Router applications.

16|1|Updated May 5, 2026
Search Tags:#typescript#scaffolding#react native#folder structure#expo#expo router#project layout
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-project-structure-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-project-structure
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/expo-project-structure
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-project-structure-aibiz-automatyzacje

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When starting a new Expo app, developers face ambiguity about where files should live — routes, components, screens, server code, and tests can end up scattered or mixed into the routing directory. This Skill provides a canonical folder layout for new Expo Router projects so every file has a clear home from day one. ## Core Features & Use Cases - Complete folder skeleton: A ready-made layout covering src/app (routes only), components/, screens/, server/, hooks/, and utils/, with kebab-case naming and colocated tests. - Routing discipline: Enforces that src/app contains only Expo Router route files, with complex screen UI moved to screens/ and API routes grouped under app/api/ using the +api suffix. - Platform-specific code guidance: Rules for splitting components into .ios, .android, .native, and .web variants with identical props and a required default file. - Use Case: You are scaffolding a brand-new Expo app with Expo Router and need to decide where a settings screen, a reusable bar-chart component, and a server API route should go — this Skill gives the exact placement for each. ## Quick Start Ask the AI to scaffold a new Expo Router project structure following the expo-project-structure conventions and explain where each file type belongs.

Frequently Asked Questions about expo-project-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure folders in a new Expo Router app?▼

Keep all app code under src/, with src/app reserved exclusively for Expo Router route files. Place reusable UI in components/, screen bodies in screens/, server-only helpers in src/server/, and utilities with colocated tests in utils/.

Where should screen components go in Expo Router?▼

Complex screen UI belongs in a screens/ folder, not in app/, because every file in app/ becomes a route. Each route file then simply renders its screen, and screen-private components are colocated inside that screen's folder.

How do I write platform-specific components in Expo?▼

Split large platform differences into separate files like bar-chart.tsx and bar-chart.web.tsx, imported without an extension so Metro picks the right one. Supported extensions are .ios, .android, .native, and .web, and a default file is always required.

Can I apply this structure to an existing Expo project?▼

No, this layout is intended only for new projects with no committed structure. Existing apps should keep their current conventions, and you should never restructure an established codebase to match this skeleton.

How do API routes work in Expo Router?▼

Appending +api to a file in app/ creates a server API route that runs in a Node-like environment and can read secret environment variables. Group them under app/api/ and keep shared server helpers in src/server/.

Related Skills

Explore More Software Engineering Skills→
TaquitTaquit

expo-project-structure

Defines folder structure conventions for scaffolding new Expo apps with Expo Router.

Community
Basic
masssi164masssi164

flutter-embedding-native-views

Embed native Android, iOS, and macOS views inside Flutter apps.

Community
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-brand-demo-gen

Convert Brand Guideline Markdown into standalone HTML demos with inline CSS.

Community
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-architecture

Architect Flutter apps with MVVM, Clean Architecture, and DI layers.

Community
Advanced