Prototo works out of the box once Prerequisites are installed. You can go straight to The two-window model.

This page is optional. Do it once on your Mac if you want Claude Code to prototype with current Expo docs, Figma context, and iOS-level interaction patterns — not just generic React from memory.

What you are setting up

Claude Code can connect to external tools through MCP servers (live data and APIs) and plugins (bundled skills that teach Claude how to work). For Prototo, three setups matter most:

You install these once per Mac. They apply whenever you run claude inside a Proto project.

1 — Figma MCP

Best if you design in Figma and want screens to match your file.

Recommended — Figma plugin

In Terminal:

claude plugin install figma@claude-plugins-official

Restart Claude Code. Run /plugin and complete Figma authorization when prompted.

Manual alternative

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Then open Claude Code, run /mcp, select figma, and choose Authenticate.

Once connected, you can prompt with Figma context — for example: “build the Home screen from my Figma file, match spacing and typography from the selected frame.”

Official guide: Figma MCP for Claude Code 

2 — Context7 (Expo and library docs)

Prototo runs on Expo. Context7 fetches up-to-date documentation when Claude writes or fixes screens.

Recommended — one-command setup

npx ctx7 setup --claude

This walks you through sign-in and installs the Context7 skill. On a remote machine without a browser, use an API key from context7.com/dashboard :

npx ctx7 setup --claude --api-key YOUR_API_KEY

Plugin alternative (inside Claude Code):

/plugin marketplace add upstash/context7
/plugin install context7-plugin@context7-marketplace

Manual MCP alternative

claude mcp add --scope user --transport http context7 https://mcp.context7.com/mcp

Run /mcp in Claude Code to confirm context7 shows as connected.

Context7 shines when you ask for specific APIs — navigation, Reanimated, expo-image, native tabs — and Claude needs the correct import and props for your Expo SDK version.

3 — Expo plugin (native UI and interaction)

The official Expo plugin adds skills tuned for real native feel: stack headers, form sheets, haptics-friendly controls, scroll physics, zoom transitions, and platform-specific patterns.

In Terminal:

claude plugin install expo@claude-plugins-official

Restart Claude Code. The building-native-ui skill activates when you ask for screens, navigation, animations, or iOS-style components.

Useful prompts once this is installed:

add a settings screen with grouped list rows and a large title header

use a native form sheet for the edit profile flow with a save button in the toolbar

add a zoom transition when tapping a card into the detail screen

For advanced cases, the same plugin includes skills for SwiftUI views, native data fetching, and Expo upgrades — you do not need to install them separately.

Verify everything

Open Claude Code in any Proto project:

cd myapp
claude

Then:

• /mcp — lists MCP servers and connection status (Figma, Context7, etc.)
• /plugin — lists installed plugins and their skills

If a server shows as disconnected, select it in /mcp and authenticate again.

Share setup with your team (optional)

To give everyone the same MCP config, add a .mcp.json file at your project root and commit it:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Each person still signs in to Figma and Context7 on their own Mac the first time. See Share via GitHub if you want the config file in the repo.