mobile-react-native

Name: mobile-react-native
Author: tomevault-io

Other Community

Repo stars 0
Author updated Live
Author repo skills-registry

Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network

Domain: Other
Compatible agents: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
Trust score: 88 / 100 · community maintained
Author / version / license: @tomevault-io · no license declared
Token usage: Lean
Setup complexity: Plug-and-play
External API key: Not required
Operating systems: macOS · Linux · Windows
Runtime requirements: No special requirements
Permissions: Read-only
Write / modify
Network behavior: External requests
Install commands: 26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview mobile-react-native.preview

---
name: mobile-react-native
description: >- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typesc…
category: other
runtime: no special runtime
---

# mobile-react-native output preview

## PART A: Task fit
- Use case: >- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typescript npx expo install expo-router expo-linking expo-constants npx expo install nativewind tailwindcss ├── _layout.tsx # Root layout (navigation) makes outbound network calls. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Initial Setup / Directory Structure / Key Patterns” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “>- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typescript npx expo install expo-router expo-linking expo-constants npx expo install nativewind tailwindcss ├── _layout.tsx # Root layout (navigation) makes outbound network calls. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “Initial Setup / Directory Structure / Key Patterns” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; may access external network resources; usually needs no extra API key.

## Running Rules
- read files, write/modify files; may access external network resources; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.

SKILL.md SKILL.md

---
name: mobile-react-native
description: >- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typesc…
category: other
source: tomevault-io/skills-registry
---

# mobile-react-native

## When to use
- >- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typescript npx expo install…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.

## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.

## Execution rules
- Organize steps around “Initial Setup / Directory Structure / Key Patterns” and keep inference separate from source facts.
- read files, write/modify files; may access external network resources; usually needs no extra API key.
- Validate with a small sample before expanding the task.

## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.

Evidence boundary and execution chain

The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.

skill "mobile-react-native" {
  input      -> user goal + target files + boundaries + acceptance criteria
  context    -> Initial Setup / Directory Structure / Key Patterns
  rules      -> SKILL.md triggers / order / output contract
  runtime    -> no special runtime | read files, write/modify files | may access external network resources
  guardrails -> usually needs no extra API key + small-sample validation + diff/log review
  output     -> copyable result + checklist + next iteration
}

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: >- Use when this capability is needed. npx create-expo-app@latest my-app --template blank-typescript npx expo install expo-route…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Initial Setup”, “Directory Structure”, “Key Patterns”, “NativeWind Patterns”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name mobile-react-native directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Initial Setup / Directory Structure / Key Patterns” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Mobile — React Native + Expo

Mobile app only. Do not apply to web-only projects. Verify stack matches PROJECT_RULES.md. Record architecture decisions in docs/ai-dev/.

Initial Setup

npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo install expo-router expo-linking expo-constants
npx expo install nativewind tailwindcss

Directory Structure

app/
├── _layout.tsx           # Root layout (navigation)
├── index.tsx             # Home screen
├── (tabs)/
│   ├── _layout.tsx       # Tab navigator
│   ├── home.tsx
│   └── profile.tsx
├── (auth)/
│   ├── login.tsx
│   └── signup.tsx
└── [id].tsx              # Dynamic route
components/
├── ui/                   # Reusable UI components
└── {feature}/            # Feature-specific components
lib/
├── api.ts                # API client (fetch)
└── storage.ts            # AsyncStorage helpers
types/
└── index.ts              # Shared types

Key Patterns

One component = max 150 lines. Split if exceeded
Use RN core components first (View, Text, Pressable, FlatList)
Props: define with TypeScript interfaces
State: useState first, Zustand if complex
HTTP requests: use built-in fetch only. Do NOT install Axios
Navigation: Expo Router (file-based, like Next.js App Router)

NativeWind Patterns

// Layout
<View className="flex-1 px-4">
  <Text className="text-2xl font-bold text-gray-900 dark:text-white">Title</Text>
</View>

// Card
<View className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
  <Text className="text-lg font-semibold">{title}</Text>
</View>

// List
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
  contentContainerClassName="gap-3 p-4"
/>

Running

npx expo start
# Phone: install "Expo Go" app, scan QR code
# iOS simulator: press "i" | Android emulator: press "a"

Building Screens

Create app/{path}.tsx
Build in order: layout -> components -> data connection
Handle empty, loading, error states
Test on Expo Go (scan QR with phone)
ESLint pass

Source: ccivlcid/VibeHarness — distributed by TomeVault.

Install command

One-click installPick a runner, click Copy, paste into your terminal, press enter

npx skills add tomevault-io/skills-registry/ccivlcid--vibeharness--mobile-react-native -y

Open general install guide

View skill source

Works with

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

Security audit

88 / 100

Community

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

Metadata

Source: github
tomevault-io/skills-registry
中文

More by @tomevault-io

Category & tags

Category Other