Agent skill

React Native Best Practices

by 2SSK in 2SSK/dot-files

React Native development. An agent skill from 2SSK/dot-files.

MITAuto-check passedMobile

Install React Native Best Practices

skills CLI
$ npx skills add 2SSK/dot-files --skill react-native-best-practices -a claude-code

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

GitHub CLI
$ gh skill install 2SSK/dot-files react-native-best-practices --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/2SSK/dot-files.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/react-native-best-practices .claude/skills/react-native-best-practices && 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-best-practices
GitHub stars
247
Token cost
~570 tokens
SKILL.md length
68 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

React Native development. An agent skill from 2SSK/dot-files.

  • Building mobile apps
  • SKILL.md covers Core Principles, Cross-Platform Code, Navigation and State Management, plus 5 more sections
  • Calls npm
  • Tasks that involve Cross-platform mobile apps

What it does

React Native Best Practices is an agent skill from 2SSK/dot-files. React Native development. Cross-platform code, native modules, performance. Use when building mobile apps.

Its SKILL.md is about 570 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: opencode

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

When your agent uses it

  • Building mobile apps
  • Tasks that involve Cross-platform mobile apps

Example prompts

  • “/react-native-best-practices”

Requirements

  • Compatibility (from SKILL.md): opencode

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    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

    opencode

    From compatibility in the SKILL.md frontmatter.

Context cost

React Native Best Practices loads about 570 tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 68 words of instructions outside code blocks.

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

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 2SSK/dot-files at commit 5cab3b1, republished under its MIT licence (© 2SSK). 68 words, ~570 tokens.

Download SKILL.mdSave it as .claude/skills/react-native-best-practices/SKILL.md (or your agent's skills folder).
name
react-native-best-practices
description
React Native development. Cross-platform code, native modules, performance. Use when building mobile apps.
compatibility
opencode

React Native Best Practices

Cross-platform mobile development with React Native.

Core Principles

  • Cross-platform first: 80%+ shared code
  • Native when needed: Platform-specific modules
  • Performance: Cold start < 1.5s, memory < 120MB
  • Offline-first: Local data, sync later

Cross-Platform Code

typescript
// Platform.select for different implementations
import { Platform } from 'react-native';

const styles = Platform.select({
  ios: { paddingTop: 48 },
  android: { paddingTop: 24 },
});

Navigation

typescript
// React Navigation
import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
  </Stack.Navigator>
</NavigationContainer>

State Management

typescript
// Zustand for simple state
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Offline Storage

typescript
// WatermelonDB for offline-first
import { Database } from '@nozbe/watermelondb';

const database = new Database({
  schema: appSchema,
  modelClasses: [User, Post],
});

Native Modules

typescript
// TurboModule for New Architecture
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  startActivity(options: string): Promise<void>;
}
export default TurboModuleRegistry.getEnforcing<Spec>('CameraModule');

Push Notifications

typescript
// @notifee/react-native
import messaging from '@react-native-firebase/messaging';

await messaging().requestPermission();
const token = await messaging().getToken();

Build Commands

bash
# iOS
cd ios && pod install && cd ..
npm run build:ios

# Android
cd android && ./gradlew assembleRelease

Quality Gates

  • 80%+ cross-platform code
  • Cold start < 1.5s
  • Memory baseline < 120MB
  • Battery drain < 4%/hour
  • 60+ FPS (120 for ProMotion)
  • Crash rate < 0.1%

© 2SSK, 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 .claude/skills/react-native-best-practices of 2SSK/dot-files.

Open the folder on GitHubat commit 5cab3b1

Compare with similar skills

React Native Best Practices 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 Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Native Best Practices this skill2SSK/dot-files247—~570Automated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
Creating Reanimated Animationsgluestack/gluestack-ui5.3k—~2.4kAutomated safety check: PassNone
RtlGetStream/stream-chat-react-native1.2k—~4.4kAutomated safety check: PassCustom licence
Mobile App UI Designceorkm/mobile-app-ui-design400—~2kAutomated safety check: PassNone
Sleek Design Mobile Appssleekdotdesign/agent-skills583—~2.1kAutomated safety check: PassMIT

Similar skills

  • 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
  • Creating Reanimated Animations

    gluestack/gluestack-ui

    Generate React Native Reanimated animation code for React Native apps.

    5.3k GitHub stars~2.4k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Rtl

    GetStream/stream-chat-react-native

    Audit and maintain RTL (right-to-left) layout compatibility in stream-chat-react-native.

    1.2k GitHub stars~4.4k tokensUpdated today
    MobileAuto-check passed
  • Mobile App UI Design

    ceorkm/mobile-app-ui-design

    Design high-quality mobile app UI/UX screens, flows, and components.

    400 GitHub stars~2k tokensUpdated 3 mo ago
    MobileAuto-check passed
  • Sleek Design Mobile Apps

    sleekdotdesign/agent-skills

    Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

    583 GitHub stars~2.1k tokensUpdated 2 days ago
    MobileAuto-check passed
  • Argent Metro Debugger

    bbplayer-app/BBPlayer

    Debug a JS runtime via CDP using argent debugger tools. An agent skill from bbplayer-app/BBPlayer.

    1.1k GitHub stars~3.4k tokensUpdated yesterday
    MobileAuto-check passed

More from 2SSK/dot-files

  • Cpp Best Practices

    2SSK/dot-files

    C++ development best practices. An agent skill from 2SSK/dot-files.

    247 GitHub stars~489 tokensUpdated 25 days ago
    Auto-check passed
  • Docker and container best practices. An agent skill from 2SSK/dot-files.

    247 GitHub stars~438 tokensUpdated 25 days ago
    Auto-check passed
  • Go Best Practices

    2SSK/dot-files

    Go development best practices. An agent skill from 2SSK/dot-files.

    247 GitHub stars~467 tokensUpdated 25 days ago
    Auto-check passed
  • Observability

    2SSK/dot-files

    Observability best practices. An agent skill from 2SSK/dot-files.

    247 GitHub stars~676 tokensUpdated 25 days ago
    Auto-check passed
  • Ship

    2SSK/dot-files

    A skill your agent uses when the user wants to commit, push, and open a pull request for the current changes.

    247 GitHub stars~808 tokensUpdated 25 days ago
    Auto-check: notes
  • TDD

    2SSK/dot-files

    Test-Driven Development workflow. An agent skill from 2SSK/dot-files.

    247 GitHub stars~444 tokensUpdated 25 days ago
    Auto-check passed

Works with

Categories

Questions about React Native Best Practices

What does React Native Best Practices do?

React Native development. An agent skill from 2SSK/dot-files. React Native Best Practices is an agent skill from 2SSK/dot-files. React Native development.

When should I use React Native Best Practices?

React Native Best Practices fits situations like: building mobile apps; tasks that involve Cross-platform mobile apps.

How do I install React Native Best Practices in Claude Code?

Run `npx skills add 2SSK/dot-files --skill react-native-best-practices -a claude-code`. Or copy the skill folder (.claude/skills/react-native-best-practices in 2SSK/dot-files) into .claude/skills/react-native-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install React Native Best Practices in Codex?

Run `npx skills add 2SSK/dot-files --skill react-native-best-practices -a codex`. Or copy the skill folder (.claude/skills/react-native-best-practices in 2SSK/dot-files) into .agents/skills/react-native-best-practices in your project. Codex loads it when a task matches its description.

Can I use React Native Best Practices 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 2SSK/dot-files --skill react-native-best-practices -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-best-practices, .gemini/skills/react-native-best-practices, .github/skills/react-native-best-practices and .opencode/skills/react-native-best-practices in your project.

What does React Native Best Practices need to run?

Going by SKILL.md and its folder, React Native Best Practices needs the command-line tools its instructions call (npm). Compatibility (from SKILL.md): opencode.

Does React Native Best Practices 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 Best Practices 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 Best Practices use?

React Native Best Practices is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Native Best Practices use?

About 570 tokens (SKILL.md is roughly 2.3k 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 Best Practices?

Skills that share tags, products or a category with React Native Best Practices: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Creating Reanimated Animations (gluestack/gluestack-ui, 5.3k stars), Rtl (GetStream/stream-chat-react-native, 1.2k stars) and Mobile App UI Design (ceorkm/mobile-app-ui-design, 400 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Native Best Practices?

2SSK (a GitHub user) maintains it in 2SSK/dot-files, which has 247 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 12, 2026.

Source: 2SSK/dot-files on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.