React 助手

其他社区

作者仓库星标 0
作者仓库 skills-registry

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

原文结构

Initial Setup：原文以此为独立章节。
Directory Structure：原文以此为独立章节。
Key Patterns：One component = max 150 lines. Split if exceeded Use RN core components first (View, Text, Pressable, FlatList) Props: define with TypeScript interfaces

适用与边界

当前原文没有单列适用场景。
当前原文没有单列不适用场景或限制。

原文中的明确线索

要点：「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 — distributed by TomeVault.」
文件与命令：PROJECTRULES.md、docs/ai-dev/、View、Text、Pressable、FlatList、fetch、app/{path}.tsx

流狐整理：以上内容来自当前 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

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.

流狐档案作者与许可取自来源；运行、权限和网络为流狐检测或估算

流狐分类: 通用
作者声明 Agent: 未找到明确声明；不据此推断已兼容或已测试
静态检查: 88 / 100 · 启发式扫描，不代表运行安全
作者 / 版本 / 许可: @tomevault-io · 未声明 license
流狐 Token 估算: 低消耗
流狐接入估算: 即装即用
是否需要外部 API Key: 未发现要求
检测到的系统要求: macOS · Linux · Windows
底层运行要求: 未声明
检测到的文件与系统行为: 只读
允许写入 / 修改
检测到的网络行为: 允许外网请求
安装命令数: 无（仅作为资料）

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 mobile-react-native.preview

作者没有在当前 SKILL.md 中定义固定输出样例。

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

…

证据边界与执行链路

作者原文负责流程事实；流狐只索引当前章节、要点、文件与命令。

章节    -> Initial Setup → Directory Structure → Key Patterns → NativeWind Patterns → Running → Building Screens
要点    -> 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).
文件/命令 -> PROJECTRULES.md · docs/ai-dev/ · View · Text · Pressable · FlatList · fetch · app/{path}.tsx
内容 SHA-256 -> f3170dfef7d7