iterate

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Set up iterate in the user's project. This skill detects the framework, installs the right adapter, configures everything, and gets the user ready to go.

在用户项目中设置iterate。该技能会检测框架、安装正确的适配器、完成所有配置，让用户可以直接上手使用。

Steps

步骤

Detect the framework. Look at the project's dependencies in
```
package.json
```
:
- Next.js: Has
```
next
```
  in dependencies or devDependencies → use
```
iterate-ui-next
```
- Vite: Has
```
vite
```
  in dependencies or devDependencies → use
```
iterate-ui-vite
```
- If both are present, ask the user which one to configure
- If neither is found, tell the user iterate currently supports Next.js and Vite, and stop
Detect the package manager. Check for lock files in the project root:
- ```
pnpm-lock.yaml
```
  → pnpm
- ```
bun.lockb
```
  or
```
bun.lock
```
  → bun
- ```
yarn.lock
```
  → yarn
- Otherwise → npm
Install the adapter package as a dev dependency using the detected package manager:
- pnpm:
```
pnpm add -D <package>
```
- bun:
```
bun add -D <package>
```
- yarn:
```
yarn add -D <package>
```
- npm:
```
npm install -D <package>
```
Wire into the framework config. Read the existing config file and add the iterate wrapper:
Next.js (
```
next.config.mjs
```
,
```
next.config.js
```
, or
```
next.config.ts
```
):
- Add
```
import { withIterate } from "iterate-ui-next"
```
  at the top
- Wrap the default export with
```
withIterate()
```
  :
  js
```
export default withIterate(nextConfig);
```
- If the config already uses
```
withIterate
```
  , skip this step
- Next.js 16+ / Turbopack: Read the
```
version
```
  field from
```
node_modules/next/package.json
```
  to determine the major version. If it's 16+, the overlay must also be loaded via a React component (webpack injection is ignored by Turbopack). Find the root layout file (
```
app/layout.tsx
```
  or
```
app/layout.jsx
```
  ) and add:
  tsx
```
import { IterateDevTools } from "iterate-ui-next/devtools";
```
  Then render
```
<IterateDevTools />
```
  inside
```
<body>
```
  , after
```
{children}
```
  . If the layout already has
```
<IterateDevTools />
```
  , skip this step.
Vite (
```
vite.config.ts
```
,
```
vite.config.js
```
, or
```
vite.config.mjs
```
):
- Add
```
import { iterate } from "iterate-ui-vite"
```
  at the top
- Add
```
iterate()
```
  to the
```
plugins
```
  array:
  js
```
plugins: [react(), iterate()]
```
- If the config already uses
```
iterate()
```
  , skip this step

Create
.iterate/config.json
if it doesn't exist. Detect the dev command from

package.json

scripts (prefer

dev

, fallback to

start

json

{
  "devCommand": "<detected dev command>",
  "packageManager": "<detected package manager>",
  "basePort": 3100,
  "daemonPort": 4000,
  "maxIterations": 3,
  "idleTimeout": 0
}

Create
.mcp.json
for Claude Code MCP integration if it doesn't exist. If it already exists, check whether it already has an

iterate

server entry — if not, add one:

json

{
  "mcpServers": {
    "iterate": {
      "command": "npx",
      "args": ["iterate-mcp"],
      "env": {
        "ITERATE_DAEMON_PORT": "4000"
      }
    }
  }
}

Register the Claude Code plugin in

.claude/settings.json

so the iterate skills (

/iterate:go

/iterate:prompt

/iterate:keep

) are available. Create the file if it doesn't exist, or merge into the existing settings:

json

{
  "extraKnownMarketplaces": {
    "iterate-plugins": {
      "source": {
        "source": "github",
        "repo": "connorwhite-online/iterate"
      }
    }
  },
  "enabledPlugins": {
    "iterate@iterate-plugins": true
  }
}

Summarize. Tell the user what was set up and what to do next:
- Restart Claude Code to activate the MCP server and slash commands
- Available slash commands:
```
/iterate:prompt
```
  ,
```
/iterate:go
```
  ,
```
/iterate:keep
```
- The iterate overlay will appear automatically when their dev server runs

检测框架。 查看
```
package.json
```
中项目的依赖项：
- Next.js: 依赖或开发依赖中包含
```
next
```
  → 使用
```
iterate-ui-next
```
- Vite: 依赖或开发依赖中包含
```
vite
```
  → 使用
```
iterate-ui-vite
```
- 如果两者都存在，询问用户需要配置哪一个
- 如果两者都不存在，告知用户iterate目前仅支持Next.js和Vite，终止操作
检测包管理器。 检查项目根目录下的锁文件：
- ```
pnpm-lock.yaml
```
  → pnpm
- ```
bun.lockb
```
  或
```
bun.lock
```
  → bun
- ```
yarn.lock
```
  → yarn
- 其他情况 → npm
使用检测到的包管理器安装适配器包作为开发依赖：
- pnpm:
```
pnpm add -D <package>
```
- bun:
```
bun add -D <package>
```
- yarn:
```
yarn add -D <package>
```
- npm:
```
npm install -D <package>
```
接入框架配置。 读取现有配置文件，添加iterate包装器：
Next.js (
```
next.config.mjs
```
、
```
next.config.js
```
或
```
next.config.ts
```
):
- 在顶部添加
```
import { withIterate } from "iterate-ui-next"
```
- 用
```
withIterate()
```
  包装默认导出：
  js
```
export default withIterate(nextConfig);
```
- 如果配置中已经使用了
```
withIterate
```
  ，跳过该步骤
- Next.js 16+ / Turbopack: 读取
```
node_modules/next/package.json
```
  中的
```
version
```
  字段判断主版本号。如果是16及以上版本，浮层还需要通过React组件加载（Turbopack会忽略webpack注入）。找到根布局文件（
```
app/layout.tsx
```
  或
```
app/layout.jsx
```
  ）并添加：
  tsx
```
import { IterateDevTools } from "iterate-ui-next/devtools";
```
  然后在
```
<body>
```
  标签内部、
```
{children}
```
  之后渲染
```
<IterateDevTools />
```
  。如果布局文件中已经存在
```
<IterateDevTools />
```
  ，跳过该步骤。
Vite (
```
vite.config.ts
```
、
```
vite.config.js
```
或
```
vite.config.mjs
```
):
- 在顶部添加
```
import { iterate } from "iterate-ui-vite"
```
- 向
```
plugins
```
  数组中添加
```
iterate()
```
  ：
  js
```
plugins: [react(), iterate()]
```
- 如果配置中已经使用了
```
iterate()
```
  ，跳过该步骤

如果不存在
.iterate/config.json
则创建该文件。从

package.json

的scripts中检测开发命令（优先选择

dev

， fallback为

start

）：

json

{
  "devCommand": "<detected dev command>",
  "packageManager": "<detected package manager>",
  "basePort": 3100,
  "daemonPort": 4000,
  "maxIterations": 3,
  "idleTimeout": 0
}

如果不存在
.mcp.json
则创建该文件用于Claude Code MCP集成。如果文件已存在，检查是否已经有

iterate

服务器条目，如果没有则添加：

json

{
  "mcpServers": {
    "iterate": {
      "command": "npx",
      "args": ["iterate-mcp"],
      "env": {
        "ITERATE_DAEMON_PORT": "4000"
      }
    }
  }
}

在
.claude/settings.json
中注册Claude Code插件，这样就可以使用iterate技能（

/iterate:go

、

/iterate:prompt

、

/iterate:keep

）。如果文件不存在则创建，否则合并到现有配置中：

json

{
  "extraKnownMarketplaces": {
    "iterate-plugins": {
      "source": {
        "source": "github",
        "repo": "connorwhite-online/iterate"
      }
    }
  },
  "enabledPlugins": {
    "iterate@iterate-plugins": true
  }
}

总结。 告知用户已完成的配置内容和后续操作：
- 重启Claude Code以激活MCP服务器和斜杠命令
- 可用的斜杠命令：
```
/iterate:prompt
```
  、
```
/iterate:go
```
  、
```
/iterate:keep
```
- 当用户的开发服务器运行时，iterate浮层会自动弹出