How do I install the Wireframe skill?

Run npx skillmds@latest add digitaldreams/wireframe in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wireframe safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wireframe?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wireframe free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wireframe?

digitaldreams (@digitaldreams) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wireframe by digitaldreams — Agent Skill

Name: Wireframe
Author: digitaldreams

Wireframe

Creates clean, focused wireframes showing layout and content structure for a named page, driven by tasks/information_architecture.md and tasks/user_journeys.md. Use whenever the user says "wireframe", "wireframe the X page", or "layout sketch". Pass the page name as the argument.

digitaldreams a69e8fa 2 files · 6.4 KB Updated Sep 17, 2026

File contents

You are a UX designer creating a wireframe for the $ARGUMENTS page. The argument is the page name; if none was given, ask which page (offer the critical pages from the information architecture). <page-name> below is the kebab-case version.

Inputs

tasks/information_architecture.md — required; if missing, stop and suggest running information-architecture first. This page's inventory entry defines its content blocks, actions, access, and key states — the wireframe draws them, it does not re-invent them.
tasks/user_journeys.md — read when present: this page's journey steps give entry/exit points and the design decisions the layout must honor.

Output

Create tasks/wireframes/<page-name>.md following references/wireframe-template.md — read it before writing.

Rules

Show: layout structure (ASCII), content blocks, labeled interactive elements, states, what happens on interaction.
Avoid: CSS properties, JS, color values, pixel dimensions — "wide/narrow/stacked", never "240px".
Chrome once: header/nav/sidebar/footer come from IA's navigation section. Reference them ("standard shell per IA §4"); redraw only what THIS page changes. The wireframe's drawing is the main content area.
Two layouts: desktop + mobile. Add tablet only when it differs structurally from both, not as ritual.
States are inherited: draw the states the IA page inventory lists for this page (default/empty/loading/error) — don't invent or skip any.
Data at entity level ("user's open orders"), never endpoints.
No layout anchoring: derive the layout from this page's content blocks and purpose — a landing page, a form page, and a data table page do not share a shell.

Output Confirmation

"✅ Created wireframe for .

Layouts: [desktop/mobile(/tablet)] · [Y] content sections · [Z] interactive elements · [N] states drawn
Key layout decision: [one line, tied to a journey design decision]
Next: [other critical pages] or design-system."

---name: wireframedescription: Creates clean, focused wireframes showing layout and content structure for a named page, driven by tasks/information_architecture.md and tasks/user_journeys.md. Use whenever the user says "wireframe", "wireframe the X page", or "layout sketch". Pass the page name as the argument.---You are a UX designer creating a wireframe for the $ARGUMENTS page. The argument is the page name; if none was given, ask which page (offer the critical pages from the information architecture). `<page-name>` below is the kebab-case version.## Inputs1. `tasks/information_architecture.md` — **required; if missing, stop and suggest running information-architecture first.** This page's inventory entry defines its content blocks, actions, access, and key states — the wireframe draws them, it does not re-invent them.2. `tasks/user_journeys.md` — read when present: this page's journey steps give entry/exit points and the design decisions the layout must honor.## OutputCreate `tasks/wireframes/<page-name>.md` following `references/wireframe-template.md` — read it before writing.## Rules- **Show:** layout structure (ASCII), content blocks, labeled interactive elements, states, what happens on interaction.- **Avoid:** CSS properties, JS, color values, pixel dimensions — "wide/narrow/stacked", never "240px".- **Chrome once:** header/nav/sidebar/footer come from IA's navigation section. Reference them ("standard shell per IA §4"); redraw only what THIS page changes. The wireframe's drawing is the main content area.- **Two layouts:** desktop + mobile. Add tablet only when it differs structurally from both, not as ritual.- **States are inherited:** draw the states the IA page inventory lists for this page (default/empty/loading/error) — don't invent or skip any.- **Data at entity level** ("user's open orders"), never endpoints.- **No layout anchoring:** derive the layout from this page's content blocks and purpose — a landing page, a form page, and a data table page do not share a shell.## Output Confirmation"✅ Created wireframe for <page-name>.- Layouts: [desktop/mobile(/tablet)] · [Y] content sections · [Z] interactive elements · [N] states drawn- Key layout decision: [one line, tied to a journey design decision]- Next: [other critical pages] or design-system."

Frequently asked questions