ui-iteratelisted

Drive an interactive UI redesign loop on a running web app: render it via the Playwright MCP, critique it (using the ui-design-reviewer agent) against Material-informed minimalism, apply edits, re-render, and repeat according to the user's feedback until they approve. Use when iterating on a screen's look and feel with a human in the loop. Writes code, so it is user-invoked only.
hcussi/claude-code-toolkit · ★ 0 · Web & Frontend · score 63

Install: claude install-skill hcussi/claude-code-toolkit

# ui-iterate Run a human-in-the-loop redesign cycle on a live UI. Each round: render the app, critique it, agree on changes with the user, edit the code, re-render, and show before/after, repeating until the user is satisfied. The design bar is **Material-informed minimalism** (see `references/material-minimalism-rubric.md`). This skill drives the loop and edits files; it delegates the per-round critique to the `ui-design-reviewer` agent so review stays consistent and evidence-based. ## Why this is a skill, not just an agent A subagent runs once and returns; it cannot pause to collect the user's feedback mid-run. This loop is inherently multi-turn and conversational, so it lives in the main thread (this skill) and calls the `ui-design-reviewer` agent for the autonomous critique each round. ## Preflight 1. Confirm the **Playwright MCP** is available (`browser_*` tools). If not, ask the user to install it (`claude mcp add playwright npx @playwright/mcp@latest`). 2. Confirm the **dev server is running** and get the target URL (for example `http://localhost:3000`). Start it if needed (for example `npm run dev` in the background) and wait until it responds. 3. Identify the files that own the screen (framework-specific: for Next.js, typically the page/component, global CSS, and layout). Discover them with Glob/Grep; do not assume paths. 4. Ask the user for goals and any hard constraints (brand palette, must-keep elements, do-not-touch areas). ## The loop R