メニュー
Use when sketching a new screen before visual design, when restructuring an existing page's content priority, when validating layout feasibility with engineering, or when communicating responsive behavior across breakpoints.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | wireframing |
| description | Use when sketching a new screen before visual design, when restructuring an existing page's content priority, when validating layout feasibility with engineering, or when communicating responsive behavior across breakpoints. |
| metadata | {"references":["references/content-hierarchy.md","references/layout-systems.md","references/wireframe-patterns.md"]} |
Given a user request for a wireframe:
Output format: ASCII block + numbered notes table + responsive notes section.
Fidelity selector:
Input: "Create a wireframe for a SaaS pricing page."
Output:
+----------------------------------------------------------------+
| [Logo] Product Pricing Docs Blog [Sign in] [Try] | (1)
+----------------------------------------------------------------+
| |
| Simple pricing. No surprises. | (2)
| Pick a plan, change anytime. |
| |
| [ Monthly | Annual -20% ] | (3)
| |
+----------------------------------------------------------------+
| +------------+ +------------+ +------------+ |
| | Starter | | Pro ★ | | Enterprise | | (4)
| | $0/mo | | $29/mo | | Contact us | |
| | - 3 seats | | - 25 seats| | - Unltd | |
| | - Basic | | - SSO | | - SLA | |
| | [Get free] | | [Start trl]| | [Talk] | |
| +------------+ +------------+ +------------+ |
+----------------------------------------------------------------+
| Compare plans (collapsible feature matrix) | (5)
+----------------------------------------------------------------+
| Logos: Acme, Globex, Initech, Umbrella | (6)
+----------------------------------------------------------------+
| FAQ accordion (5 items) | (7)
+----------------------------------------------------------------+
| Footer |
+----------------------------------------------------------------+
| # | Block | Notes |
|---|---|---|
| 1 | Header | Sticky on scroll. Trial CTA always visible. |
| 2 | Headline | Plain language. No jargon. |
| 3 | Toggle | Default = Annual (highest LTV). Persist choice in URL. |
| 4 | Plan cards | Highlight Pro with badge + scale 1.05. CTAs route to signup with plan preselected. |
| 5 | Comparison | Collapsed by default; expand updates URL hash. |
| 6 | Social proof | Grayscale logos, color on hover. |
| 7 | FAQ | One open at a time; structured data for SEO. |
Responsive:
+--------+----------------------------------------------------+
| Logo | Page title [Search] [Avatar] |
+--------+----------------------------------------------------+
| Nav | KPI 1 | KPI 2 | KPI 3 | KPI 4 |
| Home |--------+-------+-------+-------- |
| Users | |
| Data | +-------------------- Chart -------------------+ |
| Bills | | | |
| ... | +----------------------------------------------+ |
| | |
| | Recent activity (table, 10 rows, paginated) |
+--------+----------------------------------------------------+
+----------------+-------------------------------------------+
| [Search] | Subject: Re: Q3 budget review |
| [Filter ▾] | From: alex@acme.co · 2h ago |
|----------------|-------------------------------------------|
| ● Item 1 2h | |
| Preview… | Body of the selected item renders here. |
|----------------| Toolbar: Reply | Forward | Archive |
| Item 2 5h | |
| Preview… | Attachments (2) |
|----------------| |
| Item 3 1d | |
+----------------+-------------------------------------------+
More patterns (settings, form, search results, landing mobile): wireframe-patterns.md, layout-systems.md.
| Type | Format |
|---|---|
| Content | Callout with description |
| Interaction | Numbered note: "On click → opens modal X" |
| Conditional | "If logged in, show Y; else show Z" |
| Responsive | "At <768px: stack vertically" |
| Data source | "Populated from /api/v2/plans" |
| Constraint | "Max 120 chars", "16:9 ratio" |
Document at 375 / 768 / 1280px: