Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLIAbout this skill
Figma Prototype 相当の操作可能 HTML モックアップを生成する。 画面遷移俯瞰図 + States Matrix + viewport プリセット (実機 CSS px W×H) + auto-layout 検証を1ファイルにまとめる。プロジェクトの既存 CSS トークンを自動取り込み。 Use when: ユーザーが「モックアップ作って」「画面遷移図」「Figma 風プロトタイプ」 「flow mockup」「画面比較ページ」「デザイン案を並べて」「states matrix」 「auto-layout 確認」「画面遷移を可視化」と依頼したとき。 単独画面のスタイル提案だけなら frontend-design 系を使う。本スキルは 「複数画面 + 遷移 + 状態網羅」を1ページで俯瞰したいときに使う。
Quick start
- Copy the install prompt. Use the green button above this README.
- Send it to your agent. Paste it into your coding agent’s chat and send.
- Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Review, license & listing details
Review the source before using this skill
This is an imported listing. We haven’t certified its safety, license, or compatibility. Skills may include executable scripts.
Automated security scan: Partial
Only SKILL.md was scanned. Supporting files and scripts were not checked. No safety grade has been assigned.
0 potential findings · Scanned 11/4/2026 · Scanner 0.2.1
Content SHA-256: 729653b71380eaff43349594e3b8cdd3db02eb071f755f4c0811248145b94bfb
About this listing
- Category
- Product & design
- Reported license
- Not specified
- Listing language (estimated)
- Japanese
- Review status
- Not individually reviewed
- Agent compatibility
- Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.