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 aScreensuffix, 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 (defaultapp)components_dir— shared components directory (defaultcomponents)list_component—FlashList(default) orFlatListfor 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.