/ 目录 / 演练场 / skills
● 社区 zaferayan ⚡ 即开即用

skills

作者 zaferayan · zaferayan/skills

Expo + React Native skill for Claude Code — scaffolds screens, wires navigation, and respects the Expo way instead of reinventing it.

An Expo-flavored skill for Claude Code. Teaches Claude to build mobile apps the Expo way: expo-router for navigation, proper EAS config, Expo SDK modules over random npm packages. Avoids the common trap of LLMs suggesting outdated RN-CLI patterns.

为什么要用

核心特性

实时演示

实际使用效果

skills-skill-7.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "skills-skill-7": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zaferayan/skills",
        "~/.claude/skills/skills"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "skills-skill-7": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zaferayan/skills",
        "~/.claude/skills/skills"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "skills-skill-7": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zaferayan/skills",
        "~/.claude/skills/skills"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "skills-skill-7": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zaferayan/skills",
        "~/.claude/skills/skills"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "skills-skill-7",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zaferayan/skills",
        "~/.claude/skills/skills"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "skills-skill-7": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zaferayan/skills",
          "~/.claude/skills/skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add skills-skill-7 -- git clone https://github.com/zaferayan/skills ~/.claude/skills/skills

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: skills

Spin up a new Expo app with tabs and auth in one session

👤 Devs starting a new mobile app who want the boring parts done ⏱ ~45 min beginner

何时使用: Day zero of a new project — you want tabs, stack, and a sign-in flow without reading three blog posts.

前置条件
  • Node 20+, Xcode or Android Studio — Standard Expo requirements
  • Skill installed — git clone https://github.com/zaferayan/skills ~/.claude/skills/skills
步骤
  1. Create the app
    Use the Expo skill. Start a new app 'TaskFlow' with expo-router, TypeScript, and the tabs template. Include a login screen with email/password.✓ 已复制
    → npx create-expo-app run, then file structure with app/(tabs)/ and app/(auth)/
  2. Add state
    Wire up Zustand for the auth store and persist to SecureStore.✓ 已复制
    → stores/auth.ts with zustand + persist middleware using expo-secure-store
  3. Test on device
    Start the dev server and give me the QR code to scan.✓ 已复制
    → npx expo start output

结果: A running app on your phone with tabs, auth, and persistence in under an hour.

注意事项
  • Claude suggests react-native-cli patterns — Explicitly say 'Expo SDK, expo-router only' in prompts
搭配使用: filesystem

Configure EAS Build for iOS and Android

👤 Teams ready to ship TestFlight / Play internal ⏱ ~30 min intermediate

何时使用: First time submitting to TestFlight/Play.

步骤
  1. Generate eas.json
    Use the Expo skill. Generate eas.json with preview (internal) and production profiles, correct bundle identifier patterns, and env var injection.✓ 已复制
    → Valid eas.json with both profiles
  2. Wire secrets
    Add my Sentry DSN and API base URL as EAS secrets for preview and production separately.✓ 已复制
    → eas secret:create commands listed
  3. Trigger the build
    Now trigger a preview build for iOS.✓ 已复制
    → eas build --profile preview --platform ios command

结果: EAS builds running, secrets managed.

注意事项
  • Committing app.json with secrets inline — Secrets go in EAS env, not app.json; let Claude use expo-constants to read them

Integrate a native module using Expo config plugins

👤 Devs adding functionality that requires native code (camera, biometrics, push) ⏱ ~20 min intermediate

何时使用: You need functionality beyond JS, but don't want to eject.

步骤
  1. Identify the right package
    Use the Expo skill. I need biometric auth. What's the right Expo SDK module and how do I configure it?✓ 已复制
    → expo-local-authentication named with config plugin entries
  2. Wire config plugin
    Add the config plugin entries and required iOS usage strings.✓ 已复制
    → app.json diff with plugins array and NSFaceIDUsageDescription

结果: Native module integrated via managed workflow.

注意事项
  • Adding raw native code and breaking managed workflow — Prefer Expo SDK modules and config plugins; eject only if truly needed

组合

与其他 MCP 搭配,撬动十倍杠杆

skills-skill-7 + filesystem

Bulk-apply Expo idioms across an existing RN project

Migrate my RN-CLI app to Expo managed workflow; point at the source tree.✓ 已复制
skills-skill-7 + git

Commit each step separately so EAS setup changes are auditable

Commit the EAS config changes as a distinct commit before adding secrets.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
expo_scaffold app name, template, features Starting a new app 0
eas_config profiles needed Setting up builds 0
config_plugin_wire native module name Adding native features 0

成本与限制

运行它的成本

API 配额
None built-in
每次调用 Token 数
Moderate
费用
Expo is free; EAS Build has a free tier with paid scaling
提示
Use EAS local builds during dev; cloud builds only for preview/prod.

安全

权限、密钥、影响范围

凭据存储: No direct creds; EAS secrets are managed by Expo
数据出站: None from skill itself

故障排查

常见错误与修复

Metro can't find module after install

Run npx expo install rather than npm install so SDK-compatible versions are picked

验证: npx expo-doctor
Build fails with 'unrecognized bundle identifier'

Bundle ID mismatch between app.json and Apple Developer portal; align them

Native module not found at runtime

Config plugin didn't run; rebuild with eas build or npx expo prebuild --clean

替代方案

skills 对比其他方案

替代方案何时用它替代权衡
React Native CLIYou need maximum native control and don't mind managing Xcode/GradleMuch more setup burden
FlutterCross-platform with DartDifferent language, different ecosystem

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills