// Build a UI prototype for design exploration. Creates a self-contained, unauthed page in the real web app with mock data, exposes it for preview, and runs visual audits. Use when exploring layouts, information architecture, or interaction patterns before committing to production implementation.
Full environment variable reference for SAM. Use when adding, modifying, or documenting environment variables, configuring deployment, or working with Worker secrets. Trigger when asked about env vars, secrets, or configuration.
Full environment variable reference for SAM. Use when adding, modifying, or documenting environment variables, configuring deployment, or working with Worker secrets.
Content creation from strategy artifacts. Drafts social media posts, blog outlines, changelog announcements, product launch copy, and developer content. Trigger when asked to write social posts, blog content, announcements, launch copy, or atomize strategy docs into publishable content.
Engineering strategy and technical planning. Builds roadmaps (Now/Next/Later), technology radar, build-vs-buy analyses, and tech debt registers. Trigger when asked about roadmap planning, technology evaluation, build-vs-buy decisions, or tech debt prioritization.
Build a self-contained UI prototype for design exploration. Creates an unauthed page in the real web app with stress-test mock data, exposes the dev server for preview, and runs visual audits at mobile and desktop viewports. Use when exploring layouts, information architecture, or interaction patterns before production implementation.
Go code review specialist for VM Agent and CLI. Reviews PTY/WebSocket/JWT code, CLI command contracts, static-analysis findings, and Go idioms. Use when working in packages/vm-agent/, packages/cli/, or reviewing Go code changes.
| name | prototype |
| description | Build a UI prototype for design exploration. Creates a self-contained, unauthed page in the real web app with mock data, exposes it for preview, and runs visual audits. Use when exploring layouts, information architecture, or interaction patterns before committing to production implementation. |
Build a self-contained UI prototype inside the real web app for design exploration and UX iteration.
Read .claude/rules/37-prototype-development.md for the complete prototype development rules. Everything below is a summary workflow.
Before building, read the current implementation to understand:
Create two files:
apps/web/src/pages/<name>-prototype/
├── index.tsx # Main component — self-contained, no API calls, no auth
└── mock-data.ts # Stress-test mock data (long text, many items, empty states, edge cases)
Critical requirements:
<div style={{ height: '100vh', overflow: 'auto' }}>VmSizeCard, @simple-agent-manager/ui, etc.) wherever possibleAdd to App.tsx in the public routes section:
import { MyPrototype } from './pages/<name>-prototype';
// In Routes, alongside other public routes:
<Route path="/prototype/<name>" element={<MyPrototype />} />
cd apps/web && npx vite --host 0.0.0.0
Then expose the port using the SAM MCP expose_port tool (port 5173, protocol http). Share the resulting URL with the user.
Run Playwright screenshots at both viewports:
Check for: overflow, clipping, text wrapping, touch targets (44px+ min), empty states, long content handling.
Save screenshots to .codex/tmp/playwright-screenshots/.
Prototypes may be committed to feature branches for collaboration. They MUST be removed before any merge to main:
App.tsxApp.tsx