mobile-react-native

Other Community

Repo stars 0
Author repo skills-registry

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.

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: Other
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 88 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @tomevault-io · no license declared
Fluxly token estimate: Lean
Fluxly setup estimate: Plug-and-play
External API key: No requirement detected
Detected OS requirements: macOS · Linux · Windows
Runtime requirements: Unspecified
Detected file/system behavior: Read-only
Write / modify
Detected network behavior: External requests
Install commands: None (reference only)

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

The current SKILL.md does not define a fixed output example.

SKILL.md SKILL.md

# 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

```bash
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

```tsx
// 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"
/>

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> Initial Setup → Directory Structure → Key Patterns → NativeWind Patterns → Running → Building Screens
terms    -> Mobile app only. · HTTP requests: use built-in fetch only. Do NOT install Axios · > Mobile app only. · - One component = max 150 lines. · 1. Create app/{path}.tsx 2. · --- > Source: [ccivlcid/VibeHarness](https://github.com/ccivlcid/VibeHarness) — distributed by [TomeVault](https://tomevault.io).
files/cmd -> PROJECTRULES.md · docs/ai-dev/ · View · Text · Pressable · FlatList · fetch · app/{path}.tsx
body sha256 -> f3170dfef7d7