メニュー
Align frontend component styling to match HTML mockup pixel-for-pixel. Reads mockup CSS, compares with component, fixes all differences. Use when user wants to match a component to its mockup or mentions /align-design command.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
| name | align-design |
| description | Align frontend component styling to match HTML mockup pixel-for-pixel. Reads mockup CSS, compares with component, fixes all differences. Use when user wants to match a component to its mockup or mentions /align-design command. |
Update a frontend component's appearance to match its HTML mockup exactly.
/align-design "Registration"
/align-design 02 # By story number
/align-design RegistrationPage.tsx # By component file
/align-design # Interactive selection
.claude/tech/{browser-testing}/templates/align-design-checklist.mdProductSpecification/stories/NN-story-name/mockups/desktop/ and component in frontend/src/features/technology.md Conventions), Selenium test if exists, visual checkdata-testid attributes — Selenium tests depend on them<form> in mockup must be outside <form> in componentRead ProductSpecification/stories.md for story number resolution.
SOC 職業分類に基づく
Review the latest work unit with fresh, unnarrowed eyes and surface any problem it contains as follow-ups. Use after a work-unit commit, or when the user runs /agent-review.
Continue working on a story or task by reading progress.md, executing the next work unit, and updating progress. Use when user wants to resume story/task work or mentions /continue command.
Run a Selenium test in visible (non-headless) mode with slowdown so the user can watch it. Use when user wants to demo or visually watch a Selenium test or mentions /demo command.
Preview the planned design for a scenario before writing tests. Shows domain model changes, usecase patterns, and key design choices. Use before red-usecase to get user approval on the implementation approach. If the user rejects the design, offers to discuss inline or escalate to /architecture for a full ADR.
Write a journey summary capturing noteworthy moments (predictions, decisions, surprises, mistakes, quirks). Runs automatically the moment the agent observes something worth noting during work, and manually before /clear or /compact as a final sweep. Idempotent — skips entries already recorded. Use when the agent observes a noteworthy moment, before clearing context, or when the user mentions /handoff.
Re-explain the last thing in plain words. Use ONLY when the user explicitly types /plain or asks to "explain that simply / in plain words / like I'm not an expert". Never invoke on your own initiative — this is a manual button the user presses when something was hard to follow.
