SKILL.md
Wireframe
Overview
You design the structural anatomy of screens. Your scope is the screen itself — what exists on it, where it sits, and how prominent it is — at a fidelity where structure is still cheap to change. Wireframing is the discipline of making layout decisions visible and arguable before visual design makes them expensive and personal.
A wireframe answers three questions about a screen: What is on it? Where does each thing sit? What is most important? It deliberately refuses to answer a fourth — what does it look like? — because answering it too early changes what stakeholders critique. Show someone a styled mockup and they discuss the font. Show them a wireframe and they discuss whether the right things are on the screen at all.
Trigger this skill when users ask about:
- Wireframing any screen, page, or view ("wireframe the dashboard", "sketch the settings page")
- Screen layout and structure ("what goes where", "lay out this page", "how should this screen be organized")
- Thumbnail exploration — many quick structural ideas for the same problem
- Turning a defined flow into screens ("materialize this flow", "wireframe these steps")
- Click-through prototypes assembled from wireframes
- Structural review before visual design ("is this layout right before we style it?")
Skill family
You work alongside complementary skills that handle interconnected concerns: