メニュー
Review UI changes for design-system compliance, reusable component routing, token usage, and interaction consistency.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | design-system-review |
| description | Review UI changes for design-system compliance, reusable component routing, token usage, and interaction consistency. |
Use this skill after UI or component changes in projects with a shared design system.
AGENTS.md, CLAUDE.md, DESIGN.md, and DESIGN_REVIEW.md.src/design-system, src/components, src/styles, Storybook canvases, and UI tests.src/design-system/index.ts as the public component-library API.@/design-system.src/components/ui and src/components/shared stay implementation owners for primitives and shared building blocks.src/styles/global.css tokens or documented exception palettes.DESIGN.md.aria-* state, disabled behavior, tooltips, and loading/status labels stay intact after refactors.Run the narrowest relevant checks first, then the repository gate before completion:
mise run test:unit:dom
mise run test:e2e
mise run check
For browser-visible changes, also run mise run app:dev:browser and exercise the reader, settings modal, command palette, and subscriptions workspace with click and keyboard flows.
総合判定: OK | 調整推奨 | 大幅修正推奨
- Design-system routing: OK | 要修正
- Token usage: OK | 要修正
- Component reuse: OK | 要修正
- Interaction/a11y: OK | 要修正
- Storybook/tests: OK | 要修正
優先修正:
1. ...
2. ...
3. ...
Route work in the `~/.apm` global APM workspace: decide what owns a change, which path is the source of truth, and which APM rollout / `mise` task to run. Use for skill update and redistribution requests (`skillアップデートして再配布して`, `再配布`), `apm.yml` / `apm.lock.yaml` and managed catalog rollout, manual-skills package state, orphaned APM packages, checked-out external dependency repositories, optional repository-scoped skill packages, and `apmのバージョンあげて` / pinned `apm` source checks. For skill body, description, script, reference, or asset design itself, coordinate with `skill-creator`; for general mise usage outside the APM workspace (including `mise upgrade TOOL` and `minimum_release_age`), use `mise`.
Use when deciding whether to install, enable, or troubleshoot Headroom context compression for local AI agent workflows, especially MCP, proxy, or agent-wrap usage.
Use when adding or reviewing CI-stability hooks and gates: Lefthook/pre-commit/pre-push configuration, aligning local push gates with GitHub Actions, deciding commit-vs-push gate scope, or migrating pre-commit to Lefthook. For mise task design itself, use `mise`; for debugging failing PR checks, use `gh-fix-ci`.
Curate external agent collections into this APM workspace. Use when evaluating whether an outside agent repository can be installed through APM, importing selected agents into catalog/agents, recording provenance, or refreshing curated agents from upstream.
Use when creating, rebuilding, or updating a Google Forms survey from a Markdown survey spec such as SURVEY_QUESTIONS.md, especially when the form should stay synchronized with question text, required flags, Google Forms item types, scale labels, and removed-question notes.
Slack app management knowledge for app settings, manifests, OAuth installs, scopes, bot users, Marketplace settings, App Home, display names, sender names, mrkdwn message formatting, and safe workspace-visible changes. Use when diagnosing or changing a Slack app, installed app, bot user, app label, DM header, chat sender, message text decoration, Slack links, block quotes, app approval/install state, token impact, Slack API app settings, Slack Marketplace settings, or stale Slack app name propagation.