Project scaffolding for MSW + the MCP client bridge. For runtime handler changes after setup, use the msw-cli skill.
Workflow
Run msw-cli setup in the project root (optional: --framework vite).
Follow the printed setup guide step by step (detect bundler, install deps, create mocks/, env vars, entry point).
Run msw-cli open and set the app's WebSocket URL to the URL from the output.
Run msw-cli status after starting the dev server — confirm connected: true (this only proves the WebSocket bridge, not that the first browser requests were intercepted).
Hard reload the app and confirm in DevTools → Network that initial API calls are mocked. This catches render-before-mock races that msw-cli status misses.
Use msw-cli add (and related commands) to manage mocks at runtime.
Do not duplicate the full setup guide in chat — execute from msw-cli setup output.
Notes
Ask permission before npm install / npx msw init (as the guide describes).
The WebSocket URL env var name depends on the framework: NEXT_PUBLIC_MSW_WS_URL (Next.js), VITE_MSW_WS_URL (Vite), or MSW_WS_URL (Rspack/Rsbuild/Webpack) — must match the port from msw-cli open. (MCP_SERVER_URL is accepted as a legacy fallback.)
Next.js App Router:app/layout.tsx is a Server Component; the MSW bootstrap must be a 'use client' gate so the app subtree does not mount (and fetch) before initMocks() finishes. Follow the guide’s gated MswProvider pattern — do not start MSW in a parallel useEffect while rendering the full tree.
MCP users can still use /msw-setup in an MCP client; the same guide backs both paths.
1---2name: jasonboy-msw-mcp-msw-mcp3description: msw-setup4---56# msw-setup78Project scaffolding for MSW + the MCP client bridge. For **runtime** handler changes after setup, use the `msw-cli` skill.910## Workflow11121. Run **`msw-cli setup`** in the project root (optional: `--framework vite`).132. Follow the printed setup guide step by step (detect bundler, install deps, create `mocks/`, env vars, entry point).143. Run **`msw-cli open`** and set the app's WebSocket URL to the URL from the output.154. Run **`msw-cli status`** after starting the dev server — confirm `connected: true` (this only proves the **WebSocket bridge**, not that the **first** browser requests were intercepted).165. **Hard reload** the app and confirm in DevTools → **Network** that **initial** API calls are mocked. This catches render-before-mock races that `msw-cli status` misses.176. Use **`msw-cli add`** (and related commands) to manage mocks at runtime.1819Do not duplicate the full setup guide in chat — execute from `msw-cli setup` output.2021## Notes2223- Ask permission before `npm install` / `npx msw init` (as the guide describes).24- The WebSocket URL env var name depends on the framework: `NEXT_PUBLIC_MSW_WS_URL` (Next.js), `VITE_MSW_WS_URL` (Vite), or `MSW_WS_URL` (Rspack/Rsbuild/Webpack) — must match the port from `msw-cli open`. (`MCP_SERVER_URL` is accepted as a legacy fallback.)25- **Next.js App Router:** `app/layout.tsx` is a Server Component; the MSW bootstrap must be a **`'use client'`** gate so the app subtree does not mount (and fetch) before `initMocks()` finishes. Follow the guide’s gated `MswProvider` pattern — do not start MSW in a parallel `useEffect` while rendering the full tree.26- MCP users can still use `/msw-setup` in an MCP client; the same guide backs both paths.2728---29> Source: [JasonBoy/msw-mcp](https://github.com/JasonBoy/msw-mcp) — distributed by [TomeVault](https://tomevault.io).30<!-- tomevault:4.0:skill_md:2026-06-29 -->
Run npx skillmds@latest add tomevault-io/jasonboy-msw-mcp-msw-mcp in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
msw-setup It is listed under AI & ML on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io