skills MCP — 使用場景, 安裝 & 即時演示

為什麼要用

核心特性

Expo SDK-aware scaffolding
expo-router file-based navigation patterns
EAS Build + Submit config guidance
TypeScript + Zustand defaults
Avoids RN-CLI era advice

即時演示

實際使用效果

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

步驟

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)/
Add state

Wire up Zustand for the auth store and persist to SecureStore.✓ 已複製

→ stores/auth.ts with zustand + persist middleware using expo-secure-store
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.

步驟

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
Wire secrets

Add my Sentry DSN and API base URL as EAS secrets for preview and production separately.✓ 已複製

→ eas secret:create commands listed
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.

步驟

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
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
eas_config	profiles needed	Setting up builds
config_plugin_wire	native module name	Adding native features

成本與限制

運行它的成本

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

Never commit eas.json with inline secrets; use eas secret:create.
Treat expo-secure-store data as sensitive; it's encrypted but not invincible.

故障排查

常見錯誤與修復

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 CLI	You need maximum native control and don't mind managing Xcode/Gradle	Much more setup burden
Flutter	Cross-platform with Dart	Different language, different ecosystem

skills

為什麼要用

核心特性

即時演示

實際使用效果

安裝

選擇你的客戶端

使用場景

實戰用法： skills

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

前置條件

步驟

注意事項

Configure EAS Build for iOS and Android

步驟

注意事項

Integrate a native module using Expo config plugins

步驟

注意事項

組合

與其他 MCP 搭配，撬動十倍槓桿

工具

此 MCP 暴露的能力

成本與限制

運行它的成本

安全

權限、密鑰、影響範圍

故障排查

常見錯誤與修復

替代方案

skills 對比其他方案

更多

資源