Agent skill

React Native Development

by johnku2011 in johnku2011/boilerplates-with-ai-skills

A skill your agent uses when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.

MITAuto-check passedMobile

Install React Native Development

skills CLI
$ npx skills add johnku2011/boilerplates-with-ai-skills --skill react-native-development -a claude-code

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

GitHub CLI
$ gh skill install johnku2011/boilerplates-with-ai-skills react-native-development --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/johnku2011/boilerplates-with-ai-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/boilerplates/react-native-app/skills/react-native-development .claude/skills/react-native-development && 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
react-native-development
GitHub stars
240
Token cost
~596 tokens
SKILL.md length
278 words
Files
1
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.

  • Works in 5 steps: Prefer React Native core components and… → Keep App.tsx (or future screens) focused… → Handle platform differences explicitly… → …
  • Building screens
  • SKILL.md covers Overview, Process, Structure and Testing Strategy, plus 2 more sections
  • Calls npm

What it does

React Native Development is an agent skill from johnku2011/boilerplates-with-ai-skills. Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.

Its SKILL.md is about 600 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Expo React Native TypeScript app

It sits in Mobile, covering Cross-platform mobile apps. It works with React Native, Expo and npm. The licence is MIT.

When your agent uses it

  • Building screens
  • Platform behavior in this Expo React Native app
  • Follow mobile-first conventions and keep logic testable

Example prompts

  • “/react-native-development”

Requirements

  • Compatibility (from SKILL.md): Expo React Native TypeScript app
  • Pre-approved tools (allowed-tools): Read

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Prefer React Native core components and StyleSheet.create before adding UI
  2. Keep App.tsx (or future screens) focused on layout and wiring; move
  3. Handle platform differences explicitly (Platform.OS, platform-specific
  4. Respect safe areas and accessibility: meaningful labels, tappable targets,
  5. Verify with npm run typecheck and npm test before claiming completion.

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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.

  • Compatibility

    Expo React Native TypeScript app

    From compatibility in the SKILL.md frontmatter.

Context cost

React Native Development loads about 596 tokens when it runs. Until then it costs about 46 tokens; SKILL.md has 278 words of instructions outside code blocks.

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

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 johnku2011/boilerplates-with-ai-skills at commit 475dc6a, republished under its MIT licence (© johnku2011). 278 words, ~596 tokens.

Download SKILL.mdSave it as .claude/skills/react-native-development/SKILL.md (or your agent's skills folder).
name
react-native-development
description
Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.
allowed-tools
Read
compatibility
Expo React Native TypeScript app
license
MIT
metadata.stack
react-native-expo

React Native Development (Expo)

Overview

Build mobile UI with Expo and React Native. Keep screens in components; extract testable logic into pure functions under src/.

Process

  1. Prefer React Native core components and StyleSheet.create before adding UI libraries.
  2. Keep App.tsx (or future screens) focused on layout and wiring; move non-trivial logic to pure helpers you can test with npm test.
  3. Handle platform differences explicitly (Platform.OS, platform-specific files) instead of guessing runtime behavior.
  4. Respect safe areas and accessibility: meaningful labels, tappable targets, sufficient contrast.
  5. Verify with npm run typecheck and npm test before claiming completion.

Structure

  • Screens under app/ or src/screens/ (follow existing project layout).
  • Shared UI in small components; no mega-files.
  • Navigation: use Expo Router conventions if added later; document stack changes.

Testing Strategy

  • Unit tests for pure functions (formatting, validation, reducers) — required.
  • Component tests when logic is intertwined with rendering — optional in this starter; prefer extracting logic first.
  • Device/simulator for layout, gestures, and platform-specific UI — manual smoke test before release.

Guidelines

  • Do not block the JS thread with heavy sync work; defer or chunk large tasks.
  • Read secrets from environment at build time via Expo config — never hardcode API keys in source.
  • Adding native modules may require an Expo config plugin and a dev client build; document that before adding dependencies.
  • Test on at least one target (iOS simulator, Android emulator, or web) for UI changes; logic-only changes can rely on npm test.
  • Use project-security checks for auth tokens, deep links, and WebViews.

Anti-patterns

  • Copy-pasting web React patterns that assume DOM APIs.
  • Storing refresh tokens in AsyncStorage without encryption requirements documented.
  • Skipping tests because "it's just UI" while logic lives in the component.

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

Files

Just SKILL.md in boilerplates/react-native-app/skills/react-native-development of johnku2011/boilerplates-with-ai-skills.

Open the folder on GitHubat commit 475dc6a

Compare with similar skills

React Native Development 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.

React Native Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Native Development this skilljohnku2011/boilerplates-with-ai-skills240—~596Automated safety check: PassMIT
Upgrading React Nativecallstackincubator/agent-skills1.7k1 repos~1.1kAutomated safety check: PassMIT
Enable Worklets Bundle Modesoftware-mansion-labs/skills291—~4kAutomated safety check: PassNone
React Native Best Practiceskingstinct/react-native-healthkit7151 repos~861Automated safety check: PassMIT
Expo Overviewexpo/skills2.7k1 repos~2.3kAutomated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • Upgrading React Native

    callstackincubator/agent-skills

    Official

    Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and…

    1.7k GitHub starsUsed in 1 repo~1.1k tokens
    MobileAuto-check passed
  • Enable Worklets Bundle Mode

    software-mansion-labs/skills

    Enable react-native-worklets Bundle Mode (imports inside worklets, third party libraries on worklet runtimes) in an Expo, RN CLI or brownfield React Native app, including the mandatory…

    291 GitHub stars~4k tokensUpdated 9 days ago
    MobileAuto-check passed
  • React Native Best Practices

    kingstinct/react-native-healthkit

    Software Mansion's best practices for production React Native and Expo apps on the New Architecture.

    715 GitHub starsUsed in 1 repo~861 tokens
    MobileAuto-check passed
  • Expo Overview

    expo/skills

    Official

    Entry point and router for every Expo or EAS task. An agent skill from expo/skills.

    2.7k GitHub starsUsed in 1 repo~2.3k tokens
    MobileAuto-check passed
  • 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
  • Appllama App Design Skill

    Appllama/appllama-skills

    Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).

    2.4k GitHub starsUsed in 1 repo~5k tokens
    MobileAuto-check passed

More from johnku2011/boilerplates-with-ai-skills

All 18 skills in this repo
  • Project Security

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing security-sensitive code paths — check auth, secrets, input validation, dependency risk, and data exposure before shipping.

    240 GitHub stars~650 tokensUpdated 1 mo ago
    Auto-check passed
  • Code Review

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing a diff or pull request — check correctness, tests, readability, security, and server/client boundaries before approving.

    240 GitHub stars~708 tokensUpdated 1 mo ago
    Auto-check passed
  • Python API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing FastAPI routes, dependencies, or tests in this Python service — keep endpoints typed, validated, and covered by pytest.

    240 GitHub stars~449 tokensUpdated 1 mo ago
    Auto-check passed
  • Bwai Advisor

    johnku2011/boilerplates-with-ai-skills

    Use before scaffolding a bwai project — runs the full startup-goal workflow then recommends the right boilerplate and outputs the exact bwai new command to run.

    240 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed
  • Deploy Vercel

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when deploying or configuring this project on Vercel — env vars, build settings, serverless limits, and production checks for Next.js or Express.

    240 GitHub stars~660 tokensUpdated 1 mo ago
    Auto-check: notes
  • Express API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing routes, middleware, or error handling in this Express.js API, to keep endpoints consistent, validated, and testable.

    240 GitHub stars~575 tokensUpdated 1 mo ago
    Auto-check passed

Categories

Questions about React Native Development

What does React Native Development do?

A skill your agent uses when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable. React Native Development is an agent skill from johnku2011/boilerplates-with-ai-skills. Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable.

When should I use React Native Development?

React Native Development fits situations like: building screens; platform behavior in this Expo React Native app; follow mobile-first conventions and keep logic testable.

How do I install React Native Development in Claude Code?

Run `npx skills add johnku2011/boilerplates-with-ai-skills --skill react-native-development -a claude-code`. Or copy the skill folder (boilerplates/react-native-app/skills/react-native-development in johnku2011/boilerplates-with-ai-skills) into .claude/skills/react-native-development in your project. Claude Code loads it when a task matches its description.

How do I install React Native Development in Codex?

Run `npx skills add johnku2011/boilerplates-with-ai-skills --skill react-native-development -a codex`. Or copy the skill folder (boilerplates/react-native-app/skills/react-native-development in johnku2011/boilerplates-with-ai-skills) into .agents/skills/react-native-development in your project. Codex loads it when a task matches its description.

Can I use React Native Development 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 johnku2011/boilerplates-with-ai-skills --skill react-native-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-native-development, .gemini/skills/react-native-development, .github/skills/react-native-development and .opencode/skills/react-native-development in your project.

What does React Native Development need to run?

Going by SKILL.md and its folder, React Native Development needs the command-line tools its instructions call (npm). Its frontmatter pre-approves these tools: Read. Compatibility (from SKILL.md): Expo React Native TypeScript app.

Does React Native Development access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is React Native Development 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 React Native Development use?

React Native Development 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 React Native Development use?

About 596 tokens (SKILL.md is roughly 2.4k 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 React Native Development?

Skills that share tags, products or a category with React Native Development: Upgrading React Native (callstackincubator/agent-skills, 1.7k stars), Enable Worklets Bundle Mode (software-mansion-labs/skills, 291 stars), React Native Best Practices (kingstinct/react-native-healthkit, 715 stars) and Expo Overview (expo/skills, 2.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Native Development?

johnku2011 (a GitHub user) maintains it in johnku2011/boilerplates-with-ai-skills, which has 240 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on August 24, 2026.

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