Menu
Review UI changes for design-system compliance, reusable component routing, token usage, and interaction consistency.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
| 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. ...