| name | wireframing |
| description | Project-aware expert-role for wireframing and prototyping. Reads project docs first, then translates requirements into structural UI flows, low-fidelity layouts, and component hierarchies without getting bogged down in visual design details. |
wireframing
Produces a project-aware, expert-level wireframe or prototype structure by reading the repository's project docs first, then applying a user-centric structural design methodology.
This skill bridges the gap between the Product Requirements Document (PRD) and the final UI/UX implementation. It focuses on layout, information architecture, user journeys, and component structure, deferring specific styling decisions to the UI/UX phase.
Required Project Inputs
| Document | Why it matters |
|---|
docs/project-docs/foundation/prd.md | Defines the user personas, core workflows, and required data points for the interface. |
docs/project-docs/development/ui-ux.md | Provides the baseline component vocabulary (e.g., standard layouts, navigation patterns) to reuse. |
docs/project-docs/foundation/architecture.md | Clarifies constraints on client-side vs server-side rendering and data availability. |
If the repository lacks a PRD for the feature being wireframed, call that out and define the user goals before attempting to draw layouts.
When to Use
Use this skill when planning the structure of a new interface before committing to high-fidelity design or code.
| Boundary type | Typical artifacts |
|---|
| Page Layout | Grid structures, navigation placement, content zones. |
| User Flow | Multi-step wizards, checkout processes, onboarding journeys. |
| Component Hierarchy | Identifying which logical components are needed on a screen. |
| Information Architecture | Grouping related data, defining hierarchy of importance. |
Procedure
Step 1 — Extract User Goals
Extract from prd.md: What is the primary objective of the user on this screen? What are the secondary actions? What data must be visible for them to make decisions?
Step 2 — Define the Information Architecture
Determine the hierarchy of information. The most critical data and primary calls-to-action (CTAs) must sit prominently (e.g., above the fold or in highly accessible areas). Group related information into logical sections or cards.
Step 3 — Draft the Component Structure
Without writing CSS or final HTML, outline the required components.
For example:
- Navigation Header (Logo, User Menu)
- Hero Section (Primary Title, Main CTA)
- Data Grid (List of items with specific columns)
- Sidebar (Filters, Categories)
Step 4 — Map the Interaction Flow
Define how the user navigates between states:
- What happens when a button is clicked? (Modal opens, navigation occurs, inline expansion).
- How are empty states represented?
- How are loading and error states handled structurally?
Step 5 — Produce the Wireframe Representation
Generate a structural representation. This could be a text-based ASCII wireframe, a markdown-based component hierarchy tree, or a Mermaid state diagram representing the flow. Keep it strictly low-fidelity.
Quality Check
- Is the primary call-to-action immediately obvious in the structure?
- Does the layout follow established patterns from
ui-ux.md?
- Are edge cases (empty states, errors) accounted for in the flow?
- Is the information hierarchy logical and aligned with the PRD?
- Is the structure free of distracting styling details (colors, exact fonts)?
Anti-Pattern
- Focusing on colors, typography, or exact pixel padding during the wireframing stage.
- Designing layouts that assume perfect, fully populated data at all times.
- Creating disjointed screens without defining the navigation flow between them.
- Ignoring accessibility concerns regarding logical reading order.
Output Contract
When using this skill, the output should include:
- the project docs consulted and user goals assumed
- the proposed information architecture and data hierarchy
- a structural wireframe (ASCII, Markdown list, or Diagram)
- defined interaction flows between states
- identified edge cases (empty, loading, error states)
Neutral Prompt Shape
@agent use wireframing on [Target Feature/Page] focusing on [Specific User Journey].
Example Prompt
- "Create a structural wireframe for the new user dashboard."
- "Map out the component hierarchy and interaction flow for the checkout process."
- "Draft a low-fidelity layout for the data analytics page."
