ui-wireframing_skill

Overview

This skill provides a mobile-first ASCII wireframe methodology for planning UI layouts before implementation. It guides you to create WIREFRAME.md documentation in component or page directories so teams align on structure, hierarchy, and interactions prior to code. Use it to visualize responsive layouts at mobile, tablet, and desktop breakpoints.

How this skill works

The skill walks through a stepwise workflow: identify components, create a 375px mobile ASCII layout, then expand to 768px tablet and 1024px+ desktop versions. It includes templates for WIREFRAME.md, box-drawing character references, interaction annotations, data requirements, and state wireframes. The outputs are concise ASCII diagrams and short documentation blocks you can commit next to implementation files.

When to use it

• Before implementing any new UI component or page
• When planning responsive layouts across breakpoints
• To communicate component structure and data flow with engineers and designers
• When refactoring UI to improve organization and hierarchy
• When you need lightweight, versioned visual specs in the repo

Best practices

• Start mobile-first (375px) and progressively enhance for tablet and desktop
• Place WIREFRAME.md beside the component or page implementation
• Use a consistent spacing scale (8px, 16px, 24px, 32px) and grid alignment in ASCII
• Document all states (loading, empty, error) and interaction behaviors
• Specify data requirements (props, API shape) and accessibility notes

Example use cases

• Sketch a homepage hero, features list, and footer in ASCII before design handoff
• Document responsive behavior for a card list that becomes a grid on tablet and desktop
• Annotate CTA interactions and navigation behavior for developer implementation
• Create state wireframes for loading and empty results for a list component
• Record data contract (features[]) and prop types alongside the layout