メニュー
Generate HTML interface mockups for user stories. Use when user wants to create UI mockups, prototypes, or mentions /mockups command.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
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.
| name | mockups |
| description | Generate HTML interface mockups for user stories. Use when user wants to create UI mockups, prototypes, or mentions /mockups command. |
Create production-quality HTML mockups for a user story with mandatory desktop/mobile parity.
/mockups "Story name"
/mockups 5 # By MVP story number
/mockups # Interactive selection
Read these files before generating anything:
ProductSpecification/ui/ui-conventions.md (the single authority for all design rules)ProductSpecification/ui/templates/ (browse what's available)ProductSpecification/BriefProductDescription.txtProductSpecification/stories.md (story number lookup)ProductSpecification/stories/NN-story-name/NN_StoryName.mdLanding/index.html (brand reference)ProductSpecification/stories/NN-story-name/interview.mdParse user input (by name, by number, or interactive).
You MUST complete this phase fully before writing any HTML file.
NEVER proceed to Phase 4 until the Screen Plan table is complete with equal counts.
Load .claude/templates/ui/mockup-generation-rules.md for all generation rules, output location, template usage, format, and completion check.
Run /screenshot for both desktop and mobile directories.
Report: Screen Plan table, total files, screenshot locations, design decisions, whether conventions were updated.
ui-conventions.mdsidebar.html template exactlyui-conventions.md updated.claude/templates/ui/mockup-generation-rules.md — generation rules, format, templates, completion check.claude/templates/ui/icon-reference.md — icon name lookup