菜单
Implement or review frontend/mobile work using the product's approved design system, complete interaction states, semantic accessibility, responsive behavior, and evidence at the right layers. Use for any task that changes user-visible UI or interaction.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Determine the direct and transitive consequences of a MAD diff or controlled-contract change, classify compatibility and risk, mark stale work, and define proportionate revalidation. Use before QA/integration whenever shared artifacts or task premises may have changed.
Produce and validate canonical MAD completion, blocker, QA, impact, release, and responsibility-transfer reports with immutable revision evidence and explicit next ownership. Use whenever an agent finishes, pauses, fails, requests a gate, or transfers work.
Design and execute independent, risk-based validation for a pinned MAD task or integration candidate and issue a pass, pass-with-notes, fail, or blocked decision. Use for QA review, integration gates, regression analysis, and release readiness.
Implement an approved MAD task with minimal scope, established architecture, risk-driven validation, diff self-review, and truthful evidence. Use for backend, data, infrastructure, tooling, or mixed implementation work after task preflight.
Define, review, evolve, and register shared MAD contracts such as APIs, schemas, events, commands, configuration, persistence shapes, UI interfaces, migrations, and infrastructure boundaries. Use whenever work consumes or changes behavior shared across tasks or systems.
Create and verify isolated Git branches/worktrees for MAD tasks and integration, preserving ownership, base provenance, clean state, safe conflict handling, and cleanup. Use whenever agents share a repository or work must be dispatched, integrated, recovered, or retired.
| name | frontend-design-system |
| description | Implement or review frontend/mobile work using the product's approved design system, complete interaction states, semantic accessibility, responsive behavior, and evidence at the right layers. Use for any task that changes user-visible UI or interaction. |
The repository's design system, component library, tokens, patterns, and accessibility policy are authoritative. Do not invent a parallel visual language.
Completion criterion: the intended experience and its edge states can be implemented without inventing product or visual policy.
Where relevant, verify:
Automation assists but does not replace keyboard and semantic inspection.
Verify approved typography, spacing, color, elevation, iconography, density, and component variants. Check narrow, nominal, and wide layouts plus content expansion/localization. Avoid brittle coordinates, unnecessary absolute positioning, ad-hoc breakpoints, and custom components that duplicate approved primitives.
| Concern | Preferred evidence |
|---|---|
| pure logic/state reducer | unit/component test |
| component states and events | component/integration test |
| critical user journey | e2e test |
| semantics/keyboard/focus | automated a11y plus manual inspection |
| visual layout/responsiveness | rendered inspection or approved visual regression |
| performance | representative measurement against budget |
Screenshots prove appearance only; they do not prove semantics, keyboard behavior, persistence, or backend correctness.
Reject UI work for missing required states, invented styles/components, hard-coded design values, inaccessible interaction, unstable async behavior, unhandled destructive recovery, broken responsive/content expansion, missing critical journey evidence, or client/server contract drift.
Report components/screens changed, states covered, design-system APIs used, accessibility evidence, responsive/form-factor checks, critical journeys, known platform gaps, screenshots/visual references when useful, and any approved deviations with owner.
