メニュー
Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Design robust backend systems and APIs. Use when users ask to plan or implement services, data models, or integrations.
Builds a fast feedback loop, reproduces the symptom, tests ranked hypotheses, instruments narrowly, fixes, and adds regression coverage. Use when the user says diagnose/debug, reports broken behaviour, failing checks, thrown errors, flaky bugs, or performance regressions.
Stress-tests a plan against the existing domain language, code, and documented decisions, then updates CONTEXT.md or ADRs as decisions crystallise. Use when the user wants to be grilled on a design, validate a plan, sharpen terminology, or record the reasoning behind a decision.
Reviews a codebase for architectural friction and proposes deepening opportunities grounded in its domain language, tests, dependencies, and ADRs. Use when the user wants architecture review, refactoring candidates, better module shape, clearer seams, or a codebase that is easier to test and navigate.
A specialist skill for security reviews, threat modeling, and remediation guidance. Use for auth/permissions changes, secrets or PII handling, public endpoints, or dependency upgrades.
Drives changes through a strict red-green-refactor loop using behaviour tests at the public interface. Use when the user asks for TDD, test-first development, integration tests, regression coverage, or a feature built one vertical slice at a time.
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications. |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere.
Before coding, understand the context and commit to a bold aesthetic direction:
Provide working code that is:
Frontend Design Checklist
- [ ] Clarify purpose, audience, and constraints
- [ ] Declare a specific aesthetic direction
- [ ] Define typography and color system
- [ ] Design layout and motion moments
- [ ] Implement production-grade code
- [ ] Explain key visual decisions briefly