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.
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, ornext.config.ts): Vite (vite.config.ts,vite.config.js, orvite.config.mjs):
- Add import {withIterate} from "iterate-ui-next" at the top - Wrap the default export with withIterate(): export default withIterate(nextConfig); - If the config already uses withIterate, skip this step - Add the Iterate component: Find the root layout file (app/layout.tsx or app/layout.jsx) and add: import {Iterate} from "iterate-ui-next/devtools"; Then render <Iterate /> inside <body>, after {children}. If the layout already has <Iterate />, skip this step. - Add import {iterate} from "iterate-ui-vite" at the top - Add iterate() to the plugins array: plugins: [react(), iterate()] - If the config already uses iterate(), skip this step
- Create
.iterate/config.jsonif it doesn't exist. Detect the dev command frompackage.jsonscripts (preferdev, fallback tostart):{"devCommand": "<detected dev command>", "packageManager": "<detected package manager>", "basePort": 3100, "daemonPort": 4000, "maxIterations": 3, "idleTimeout": 0} - Create
.mcp.jsonfor Claude Code MCP integration if it doesn't exist. If it already exists, check whether it already has aniterateserver entry — if not, add one:{"mcpServers": {"iterate": {"command": "npx", "args": ["iterate-ui-mcp"], "env": {"ITERATE_DAEMON_PORT": "4000"}}}} - Add
.iterateto.gitignoreif not already present. Create.gitignoreif it doesn't exist. - Register the Claude Code plugin in
.claude/settings.jsonso 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:{"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