Wireframe

Skill digitaldreams/tuhin/skills/wireframe

My dev identity as a Claude Code plugin — a full Laravel team in a box: SDLC pipeline, task board, coding agents, and audit skills.

Install

npx -y skills add digitaldreams/tuhin --skill wireframe

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.3 KB, as published. Nobody here has run it

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 <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."