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.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
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, interactive element usability, 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.tsxNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Full API endpoint reference for SAM. Use when working on API routes, adding endpoints, writing API tests, or understanding the API surface. Trigger when asked about API endpoints, routes, or HTTP interfaces.
The English summary is being prepared. Showing the original description.
Full API endpoint reference for SAM. Use when working on API routes, adding endpoints, writing API tests, or understanding the API surface.
The English summary is being prepared. Showing the original description.
Recent feature changes and implementation details for SAM. Use when understanding recent changes, checking what was modified recently, or understanding feature history. Trigger when asked about recent changes, what's new, or feature history.
The English summary is being prepared. Showing the original description.
Recent feature changes and implementation details for SAM. Use when understanding recent changes, checking what was modified recently, or understanding feature history.
The English summary is being prepared. Showing the original description.
Cloudflare Workers architecture specialist. Advises on D1 migrations, KV usage patterns, R2 binary distribution, wrangler configuration, and Miniflare testing. Use when modifying wrangler.toml, working with Cloudflare services, or setting up testing infrastructure.
The English summary is being prepared. Showing the original description.
Constitution compliance validator focusing on Principle XI (No Hardcoded Values). Detects hardcoded URLs, timeouts, limits, and identifiers that should be configurable. Use proactively when implementing business logic, adding new features, or reviewing PRs for constitution compliance.
The English summary is being prepared. Showing the original description.