Designs, builds, or refactors user-facing web or application interfaces with deliberate visual direction, typography, color and spacing tokens, content hierarchy, responsive behavior, accessible interaction states, and real rendered-surface verification. Use for pages, components, dashboards, landing pages, design systems, and frontend polish. Not for backend logic, API-only work, or visual claims that cannot be rendered or inspected.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Build an interface with a point of view and a usable system, not a collection of default cards.
Inspect the existing product, design tokens, routes, components, assets, fonts, and responsive conventions. Preserve a real system unless a scoped redesign is intended.
Identify product type, user context, primary action, content hierarchy, brand constraints, supported viewport range, and available visual assets.
Extract the existing visual system before inventing one. Inspect CSS variables, theme configuration, type loading, spacing, radii, breakpoints, component variants, and recurring layout patterns. Use the dependency-free helper when the system is spread across source files:
python3 skills/frontend-design/scripts/extract_design_system.py ./src
Read design-system-extraction.md before replacing or normalizing an existing token system.
Choose a visual direction and record the reason: type pairing, color role,
density, shape language, imagery, and motion voice. Use the local
scripts/design_system.py helper for a deterministic starting brief when a
project has no design system:
python3 skills/frontend-design/scripts/design_system.py \
--product "analytics dashboard" --tone "technical" --stack react
Search the small bundled design-intelligence catalog when a choice needs comparison; read design-intelligence.md for the supported domains and limits. Do not treat a catalog result as a substitute for inspecting the existing product.
Define semantic tokens before scattering raw values through components.
Sketch the primary flow and all meaningful states: loading, empty, error, disabled, success, permission, and long-content cases.
Read design-system.md for direction, tokens,
and anti-generic heuristics. Read interaction-states.md
for state and accessibility detail. Read stack-adapters.md
only for the detected implementation stack. Use browser-testing for a real
browser flow and ui-ux-review for a separate quality pass.
Render the actual route at the narrow, intermediate, and desktop widths. Check hierarchy, overflow, focus, contrast, state transitions, content wrapping, and reduced-motion behavior. Exercise the primary task with keyboard-only input and run the project's accessibility tooling when available. Capture the state and viewport matrix from runtime-validation.md. Record screenshots or observations; source inspection alone cannot prove a visual claim.
The primary flow is usable, visual decisions are coherent and intentional, states and responsive behavior are covered, accessibility is not traded for appearance, and relevant rendered evidence is fresh.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Designs and runs reproducible evaluations for AI agents, prompts, tools, skills, and model-backed workflows using realistic datasets, isolated baselines, objective assertions, rubric grading, trajectory analysis, cost/latency tracking, and regression comparison. Use when measuring agent quality, optimizing skill triggering, comparing prompts or models, or gating an AI feature release. Not for ordinary deterministic unit tests.
日本語の概要は準備中です。原文の説明を表示しています。
Designs or reviews HTTP, REST, GraphQL, RPC, CLI, webhook, event, and service interfaces with explicit inputs, outputs, errors, compatibility, idempotency, pagination, authentication, versioning, and observability. Use when introducing or changing an API or cross-component contract. Not for internal implementation details with no boundary or for debugging one API failure; use root-cause-debugging there.
日本語の概要は準備中です。原文の説明を表示しています。
Reviews an existing codebase for structural friction, unclear ownership, leaky or shallow interfaces, excessive coupling, misplaced state, poor testability, and risky dependency direction, then prioritizes evidence-backed improvement candidates. Use for architecture audits, modularization, modernization, or recurring cross-cutting change pain. Not for designing one new interface, simplifying a local function, or fixing a reproduced bug.
日本語の概要は準備中です。原文の説明を表示しています。
Validates a running application, CLI, API, service, or generated artifact as a user or operator against a prewritten observable behavior contract while remaining source-blind. Use for acceptance checks, runtime proof, anti-fake probes, release smoke tests, or an independent companion to code review. Not for source-quality findings, root-cause diagnosis, or visual design judgment outside the contract.
日本語の概要は準備中です。原文の説明を表示しています。
Closes a completed development branch by checking the final diff and proof, presenting merge, pull-request, keep, or discard options, and cleaning up only after the user or repository workflow chooses a path. Use when feature work is complete and the branch must be integrated or retired. Not for claiming a feature is complete before verification.
日本語の概要は準備中です。原文の説明を表示しています。
Tests a real web user flow with a browser by asserting semantic behavior, network and loading states, keyboard access, responsive layouts, and stable visual evidence. Use for browser bugs, end-to-end UI behavior, responsive or accessibility checks, and screenshot baselines. Not for static source review without a browser or for backend-only tests.
日本語の概要は準備中です。原文の説明を表示しています。