← ClaudeAtlas

wireframelisted

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/tuhin · ★ 0 · Code & Development · score 70
Install: claude install-skill digitaldreams/tuhin
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 1. `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. ## 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 a