B
building-react-native-application
About building-react-native-application
A workflow skill for building React Native applications, intended for developers and coding agents working on setup, structure, screens, data, and other app tasks. It maps requests to setup steps and documented recipes, with required contract and recipe reading.
Key features
- 01Setup checklist and workflow
- 02Task-to-recipe mapping
- 03Project structure guidance
- 04Screen, UI, and form workflows
- 05Data, errors, and authentication workflows
- 06Styling and platform-fix guidance
Use cases
- 01Scaffolding a React Native app
- 02Adding a screen, form, or UI component
- 03Implementing data access or authentication
- 04Handling styling and platform-specific issues
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ cedmandocdoc/ awesome-skills --skill building-react-native-applicationAfter installing, type/building-react-native-applicationin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
agents/openai.yamlreferences/creating-async-component.mdcreating-form.mdcreating-screen.mdcreating-ui-component.mdmanaging-data.mdmanaging-environment.mdmanaging-errors.mdmanaging-linting.mdmanaging-package-installs.mdmanaging-platform-fixes.mdmanaging-project-structure.mdmanaging-styling.mdnative-app-contract.mdscaffolding-application.mdsetting-up-auth-guard.mdsetting-up-authentication.mdsetting-up-nativewind.mdscripts/detect-pm.cjsinstall-packages.cjsrun-package.cjsDetails
From the project READMEReact Native application
Setup
| Item | Kind | Required | When | Done when | How |
|---|---|---|---|---|---|
| Node.js 22.12+ | user | required | All | node --version reports 22.12 or later | https://nodejs.org |
| Standing rule | auto | required | Scaffold new app | Root AGENTS.md has the line | Add - `<target_path>` follows building-react-native-application; load it before changing code there. to root AGENTS.md (create when missing) and to root CLAUDE.md when it exists without importing AGENTS.md; skip a file that has it |
Workflow
- Setup — for each Setup row whose When covers the request, in order: Done when holds → skip;
user→ stop and print its How when required, continue without it when optional;ask→ fill what the request answers, ask the rest together in one message, record each answer;autoandstatic→ run. - Contract — read native-app-contract.md.
- Recipe — match one Recipes row; open every doc in its Read column.
- A request that spans rows (a new screen with a form) matches each of them.
Recipes
| Intent | Example phrasing | Read |
|---|---|---|
| Set up | "Set up building-react-native-application", "Is building-react-native-application ready?" | Setup — run Workflow step 1 for every row, then report each row's state |
| Scaffold | "Create an Expo app in apps/mobile", "Scaffold here", "Add linting and env handling to the app" | scaffolding-application.md, managing-package-installs.md, setting-up-nativewind.md, managing-environment.md, managing-linting.md |
| Structure | "Where does this module belong?", "Two features need this hook", "Move this component to the right layer" | managing-project-structure.md, managing-linting.md |
| Screen / feature | "Add a settings screen", "New orders feature", "Custom tab bar", "Open this screen from a link" | managing-project-structure.md, creating-screen.md |
| UI primitive | "Add a Dialog to src/ui", "Build the select from the spec" | managing-project-structure.md, creating-ui-component.md, managing-styling.md |
| Data | "Fetch orders from the API", "Add a mutation for checkout", "Format the order date" | managing-data.md, managing-environment.md |
| Async UI states | "Show the orders list with loading and error states", "Add pull-to-refresh" | creating-async-component.md, managing-data.md |
| Errors / feedback | "Show a toast when saving fails", "Report crashes", "Handle unknown links" | managing-errors.md, managing-data.md |
| Form / multi-step | "Add a profile form", "Make checkout a three-step form" | creating-form.md, managing-data.md |
| Styling / theme | "Apply the design tokens", "Change the brand colors", "Add dark mode", "Override a className" | managing-styling.md |
| Authentication | "Add the sign-in flow", "Attach the token to API calls", "Sign out on 401" | setting-up-authentication.md, managing-data.md |
| Auth guard | "Protect the account screens", "Require profile setup after sign-in", "Add an invite link", "Restrict the team screens to members" | setting-up-auth-guard.md, setting-up-authentication.md, creating-screen.md |
| Platform fixes | "The keyboard covers the input", "White flash behind the header", "Keep the splash until fonts load", "Use Inter as the body font" | managing-platform-fixes.md |
Comments
Markdown supported