Expo iOS Screen Scaffolder
Parameterized templates that generate HIG-compliant Expo Router screens. Every template produces a screen that is native-by-construction — native navigation, virtualized lists, safe areas, semantic colors, SF Symbols, haptics, and honest empty states — so new screens start correct instead of being retrofitted. Each generated file cites the expo-ios-hig rules it satisfies.
When to Apply
Use this skill when the user wants to:
- Create or add a new screen, route, or layout in an Expo app for iOS
- Scaffold a list, detail, form, modal sheet, tab bar, or settings screen
- Start a new Expo feature and want the screens to feel native from the first commit
- Bring an existing screen up to the conventions in
references/conventions.md
Available Templates
To scaffold: read the template, substitute the placeholders, and write the result to its route path under app/. Placeholders use single braces (e.g., {ScreenName}); the literal TSX braces stay as-is.
| Template |
Generates |
Placeholders |
list-screen.tsx.template |
Large-title list: FlashList + RefreshControl + empty state + bottom safe-area inset |
{ScreenName} {Entity} {entity_plural} {Title} {route_path} {sf_symbol} |
detail-screen.tsx.template |
Pushed detail: edge-to-edge scroll, semantic colors, system share button |
{ScreenName} {Entity} {entity} {entityId} |
form-screen.tsx.template |
Create form: keyboard avoidance, configured input, optimistic save + haptics |
{ScreenName} {Entity} {entity} |
modal-sheet.tsx.template |
formSheet route with detents + grabber and Cancel/Done |
{ScreenName} {Title} {route_name} |
native-tabs-layout.tsx.template |
Root NativeTabs layout with SF Symbol icons (repeat per tab) |
{tab_name} {Tab_label} {tab_sf_symbol} |
settings-screen.tsx.template |
Grouped settings: SectionList + platform Switch rows |
{ScreenName} {Title} |
Common placeholders:
{ScreenName} — PascalCase component with a Screen suffix, e.g. TrailsScreen{Entity} / {entity} / {entity_plural} — PascalCase, camelCase, and plural forms, e.g. Trail / trail / trails{entityId} — dynamic route param name, matching the file ([trailId].tsx → trailId){Title} — navigation bar title text, e.g. Trails{route_path} / {route_name} — route segment(s) used for navigation{sf_symbol} / {tab_sf_symbol} — SF Symbol name from Apple's SF Symbols app{file_path} — the destination path, written into the header comment
How to Use
- Pick the template for the screen type.
- Choose values for its placeholders (see the table above and the header comment inside each template).
- Substitute and write to the route path, e.g.
app/(trails)/index.tsx, app/(trails)/[trailId].tsx.
- Implement the imported companion (
use{Entity}List, create{Entity}, …) — the scaffold owns the view, you own the data layer.
- Read references/conventions.md for the rules each template enforces and when to deviate.
Setup
config.json is optional. Override on first use if your project differs:
app_dir — Expo Router routes directory (default app)components_dir — shared components directory (default components)list_component — FlashList (default) or FlatList for the list template
Related Skills
expo-ios-hig — the rules these templates follow; each generated file cites them.expo-ios-hig-verify — run it after scaffolding to confirm the screen stays native.
1---2name: expo-ios-screen-scaffolder3description: Scaffolds Expo (React Native) iOS screens that follow Apple Human Interface Guidelines by construction — list, detail, form, modal sheet, native tabs layout, and settings screens, each wired with native navigation, FlashList, safe-area insets, semantic colors, SF Symbols, haptics, and empty/loading states. Generated code follows the expo-ios-hig rules so it passes expo-ios-hig-verify without rework. Each screen is TSX for Expo Router, not Swift. Trigger whenever the user wants to create, add, generate, or scaffold a new Expo screen, route, tab layout, or form for iOS — even if they don't mention HIG.4---5# Expo iOS Screen Scaffolder
6
7Parameterized templates that generate HIG-compliant Expo Router screens. Every template produces a screen that is native-by-construction — native navigation, virtualized lists, safe areas, semantic colors, SF Symbols, haptics, and honest empty states — so new screens start correct instead of being retrofitted. Each generated file cites the `expo-ios-hig` rules it satisfies.
8
9## When to Apply
10
11Use this skill when the user wants to:
12
13- **Create or add a new screen, route, or layout** in an Expo app for iOS
14- Scaffold a **list, detail, form, modal sheet, tab bar, or settings** screen
15- Start a new Expo feature and want the screens to feel native from the first commit
16- Bring an existing screen up to the conventions in `references/conventions.md`
17
18## Available Templates
19
20To scaffold: read the template, substitute the placeholders, and write the result to its route path under `app/`. Placeholders use single braces (e.g., `{ScreenName}`); the literal TSX braces stay as-is.
21
22| Template | Generates | Placeholders |
23|----------|-----------|--------------|
24| [`list-screen.tsx.template`](assets/templates/list-screen.tsx.template) | Large-title list: `FlashList` + `RefreshControl` + empty state + bottom safe-area inset | `{ScreenName}` `{Entity}` `{entity_plural}` `{Title}` `{route_path}` `{sf_symbol}` |
25| [`detail-screen.tsx.template`](assets/templates/detail-screen.tsx.template) | Pushed detail: edge-to-edge scroll, semantic colors, system share button | `{ScreenName}` `{Entity}` `{entity}` `{entityId}` |
26| [`form-screen.tsx.template`](assets/templates/form-screen.tsx.template) | Create form: keyboard avoidance, configured input, optimistic save + haptics | `{ScreenName}` `{Entity}` `{entity}` |
27| [`modal-sheet.tsx.template`](assets/templates/modal-sheet.tsx.template) | `formSheet` route with detents + grabber and Cancel/Done | `{ScreenName}` `{Title}` `{route_name}` |
28| [`native-tabs-layout.tsx.template`](assets/templates/native-tabs-layout.tsx.template) | Root `NativeTabs` layout with SF Symbol icons (repeat per tab) | `{tab_name}` `{Tab_label}` `{tab_sf_symbol}` |
29| [`settings-screen.tsx.template`](assets/templates/settings-screen.tsx.template) | Grouped settings: `SectionList` + platform `Switch` rows | `{ScreenName}` `{Title}` |
30
31Common placeholders:
32
33- `{ScreenName}` — PascalCase component with a `Screen` suffix, e.g. `TrailsScreen`
34- `{Entity}` / `{entity}` / `{entity_plural}` — PascalCase, camelCase, and plural forms, e.g. `Trail` / `trail` / `trails`
35- `{entityId}` — dynamic route param name, matching the file (`[trailId].tsx` → `trailId`)
36- `{Title}` — navigation bar title text, e.g. `Trails`
37- `{route_path}` / `{route_name}` — route segment(s) used for navigation
38- `{sf_symbol}` / `{tab_sf_symbol}` — SF Symbol name from Apple's SF Symbols app
39- `{file_path}` — the destination path, written into the header comment
40
41## How to Use
42
431. Pick the template for the screen type.
442. Choose values for its placeholders (see the table above and the header comment inside each template).
453. Substitute and write to the route path, e.g. `app/(trails)/index.tsx`, `app/(trails)/[trailId].tsx`.
464. Implement the imported companion (`use{Entity}List`, `create{Entity}`, …) — the scaffold owns the view, you own the data layer.
475. Read [references/conventions.md](references/conventions.md) for the rules each template enforces and when to deviate.
48
49## Setup
50
51`config.json` is optional. Override on first use if your project differs:
52
53- `app_dir` — Expo Router routes directory (default `app`)
54- `components_dir` — shared components directory (default `components`)
55- `list_component` — `FlashList` (default) or `FlatList` for the list template
56
57## Related Skills
58
59- **`expo-ios-hig`** — the rules these templates follow; each generated file cites them.
60- **`expo-ios-hig-verify`** — run it after scaffolding to confirm the screen stays native.
pproenca