mspec-visual-prototype
visual-mock step of mspec workflow — generate UI prototype HTML and collect feedback
SKILL.md.claude/skills/mspec-visual-prototype/SKILL.md
GitHub<!-- @mspec-delta 2026-05-23-085322-rename-visual-mock-to-prototype/specs/visual-mock/spec.md -->
<!-- Requirements implemented: FR-005 -->
<!-- Change: rename-visual-mock-to-prototype -->
Procedure
- Run
mspec status --change <change-dir> --jsonto confirmcurrent_step: "visual-mock". - Invoke the
mspec-visual-prototype-runnersubagent to generatechanges/<change>/prototype/index.html.- Pass: the
## Goalssection fromproposal.md+ the detectedFrameworkInfo.promptHint(runmspec prototype --change <change-dir>to get this).
- Pass: the
- Run
mspec prototype --change <change-dir>to start the local server and display the URL. - Instruct the user to open
http://localhost:<port>in their browser. - Wait for the user to review and press Ctrl+C. Feedback is automatically saved to
prototype-feedback.md. - To skip:
mspec skip visual-mock --change <change-dir> --reason "<reason>". block: true— stop and ask the user to run/mspec:continue.
Verification (C2)
mspec validate --change <change>— アーティファクト整合性チェックmspec anchor check --change <change>— アンカー解決確認
Learning (C3)
このスキルの実行で発生した学習候補を記録する:
<!-- LEARNING: <パターン説明> | source: <FR-ID> | confidence: low|medium|high -->
mspec learn コマンドが archive 済み changes からこれらを収集してpost-condition候補をproposeする。