メニュー
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.
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 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.
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.
| name | frontend-design |
| description | 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. |
Create distinctive, visually striking UI that stands out from generic AI-generated designs.
Choose a bold direction. NEVER default to "clean and modern":
NEVER use: Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins.
DO use distinctive pairings:
Pair a distinctive display font with a refined body font. Size contrast matters: display should be dramatically larger than body.
NEVER use: Purple gradient on white. Blue-to-purple gradients. Default Tailwind palettes unchanged.
DO: Create a custom palette. Use unexpected combinations. Consider:
