メニュー
Use when perfecting a frontend design through iterative visual evaluation. Triggers: "make it look perfect", "10/10 design", "iterate on the design", "polish the UI". Loops: screenshot → evaluate → fix → re-screenshot until design scores 10/10.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when building backend APIs, REST/GraphQL endpoints, or setting up database schemas. Triggers: "build the backend", "create API", "set up database", "write endpoints", backend work for a full-stack app. Every endpoint MUST interact with the database. Produce an API summary for frontend handoff.
Use when running automated exploratory E2E testing on a web application. Triggers: "e2e loop", "exploratory testing", "test this app", "find bugs", "run e2e tests against the app". Claude becomes the tester: navigates with Playwright, clicks through workflows, documents issues.
Use when building frontend that consumes backend APIs or connects to real data sources. Triggers: "wire up the frontend", "connect to API", "fetch data from backend", "form submission", building UI that needs real data flow. NEVER use mock/hardcoded data. Every component connects to a real endpoint.
Use when debugging a failing test, unexpected behavior, or production error. Triggers: "why is this failing", "debug", "investigate", "root cause", stack traces, error messages. NEVER skip to a fix without completing the investigation phases.
Use when implementing a new feature that requires multiple files and careful planning. Triggers: "implement feature", "build this feature", "add this functionality", multi-file changes. 7-phase structured development with exploration and design before any code.
Use when building web UI components, pages, or applications. Triggers: building frontend, creating components, designing UI, web application work. Creates distinctive, bold designs that avoid AI-slop aesthetics.
| name | 10-10-frontend |
| description | Use when perfecting a frontend design through iterative visual evaluation. Triggers: "make it look perfect", "10/10 design", "iterate on the design", "polish the UI". Loops: screenshot → evaluate → fix → re-screenshot until design scores 10/10. |
Iterate on frontend design using Playwright screenshots until the design scores a perfect 10/10.
Take a Playwright screenshot of the current state:
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('http://localhost:PORT');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
Read the screenshot and rate it on these criteria (each 1-10):
| Criterion | What to Assess |
|---|---|
| Typography | Font choices, hierarchy, sizing, spacing, readability |
| Color | Palette cohesion, contrast, mood, distinctiveness |
| Layout | Spatial composition, alignment, visual flow, responsiveness |
| Polish | Hover states, transitions, micro-interactions, loading states |
| Distinctiveness | Does it look like AI-generated slop or like a crafted design? |
Overall score = average of all criteria.
For each criterion scoring below 8:
/frontend-design skill guidelinesGo back to Step 1. Take a new screenshot after fixes.
Stop when ALL criteria score 8+ AND overall score is 10/10.
If after 5 iterations the score is stuck: