run-app
Build, start, and drive the Nuxt Theme Builder in a real browser (Playwright) to verify a change end to end — editor interactions, iframe preview sync, persistence across reloads, source view. Use whe
SKILL.md.claude/skills/run-app/SKILL.md
GitHubRun and drive the app: $ARGUMENTS
Start a server
- Fast iteration:
pnpm dev(port 3000). Security headers are disabled in dev, and the source-view map only refreshes on restart. - Production-like (use this to verify SSR, hydration, cookies, CSP):
NITRO_PRESET=node-server NODE_OPTIONS=--max-old-space-size=8192 pnpm build # ~5 min NITRO_HOST=127.0.0.1 NITRO_PORT=3000 node .output/server/index.mjs # run in the background - Font-provider 403 warnings during the build are expected in network-restricted sandboxes.
- To stop the server, kill it by PID, or with
pkill -f "node .output/server"in a separate command. Apkill -fpattern that also appears in its own command line kills the calling shell.
Drive it
- Existing specs:
pnpm exec playwright test tests/e2e/smoke(reuses a server already on :3000 locally). - Ad-hoc checks: write a short script in your scratch dir using
chromiumfrom@playwright/test, and wait for[data-testid="theme-editor"][data-hydrated="true"]before interacting. - In Claude Code on the web, if Playwright's pinned Chromium isn't installed, launch with
executablePathpointing at the preinstalled build (/opt/pw-browsers/chromium-*/chrome-linux/chrome) instead of runningplaywright install.
Useful checks
- Theme sync: on a demo route such as
/components/button, change a control in the sidebar and assert that a CSS variable inside the preview iframe changes (frameLocator("iframe")). Other pages render without the iframe, so check the top document there. - Persistence:
context.cookies()→themecookie holds{ config, activePresetName }(must stay under 4096 bytes);localStorage["theme-presets"]holds saved presets. Reload and assert that both survive. - Undo after reload: make a change, then
ControlOrMeta+zshould return to the reloaded theme. - Source view (
/templates/*): toggle to code, navigate to another template and back, and confirm the code matches the route. - Hydration: collect
page.on("console")messages and fail on "Hydration" warnings (dev server).
Report what you ran, what you observed (quote values), and clean up the server and any scratch scripts.