メニュー
Translate a design intent into clean, idiomatic frontend code. Use when building or refactoring UI components — enforces composition, design tokens, responsive layout, accessibility, and matching the surrounding codebase's conventions. For React/Vue/Tailwind/CSS work.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Diverge then converge on ideas before building. Use when the user wants options, concepts, directions, or "ideas for X" — generates multiple distinct approaches, pressure-tests them against goals/constraints, then recommends one with rationale. Pairs well with ui-ux-pro-max and goal.
Verify code against current, real library documentation before using an API. Use when working with a specific library/framework version and you must not guess APIs. Encourages checking official docs/types for the installed version. NOTE - the real Context7 is an MCP server; see setup notes below to enable live doc lookup.
Clarify and pursue a goal end-to-end. Use when the user states an outcome they want achieved ("make my portfolio showcase me as X", "get this shippable"). Restates the goal, defines success criteria, plans steps, executes, and verifies the goal was actually met.
A rigorous correctness-and-detail finishing pass. Use when the user wants work to be "impeccable", flawless, production-grade, or polished to a high standard — verifies builds/lints/tests pass, hunts edge cases, checks accessibility and consistency, and refuses to claim done without proof.
Apply restrained design taste to a UI. Use when the user wants the interface to feel tasteful, elegant, minimal, or "not overdesigned" — favors simplicity, whitespace, a tight palette, subtle motion, and removing decoration that doesn't earn its place.
Senior UI/UX craft pass for web frontends. Use when the user asks to upgrade, polish, redesign, or "make it premium/pro" — applies design-token systems, visual hierarchy, spacing rhythm, accessible color/contrast, motion restraint, and responsive layout. Best for React/Tailwind/CSS projects.
| name | frontend-design |
| description | Translate a design intent into clean, idiomatic frontend code. Use when building or refactoring UI components — enforces composition, design tokens, responsive layout, accessibility, and matching the surrounding codebase's conventions. For React/Vue/Tailwind/CSS work. |
Turn design intent into production-quality frontend code that reads like the rest of the codebase.
Invoke when implementing or refactoring UI components, layouts, or design systems.
Match the codebase. Mirror existing naming, file structure, styling approach (Tailwind utilities vs CSS modules vs vars), and import order. New code should be indistinguishable from good existing code.
Compose, don't duplicate. Extract repeated markup into components. Repeated style strings → a shared class or token. If you copy-paste a block twice, stop and abstract it.
Tokens over literals. Reference design tokens (CSS vars / theme keys) for color, spacing, radius, shadow. No magic numbers or stray hexes.
Semantic + accessible HTML. Use the right element (button, nav,
section, label). Provide alt, aria-*, and keyboard support.
Every interactive element has a visible focus state.
Responsive by default. Mobile-first; layouts adapt at sensible breakpoints. No fixed widths that break small screens.
State coverage. Handle loading, empty, error, hover, active, focus, disabled — not just the happy path.
Performance. Lazy-load heavy/below-the-fold content, code-split big dependencies, lazy images/iframes, avoid layout thrash.
