القائمة
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