skills.rest
AdelysAlberto
AdelysAlbertoCOMMUNITY
Explore all skills by this author →
Website𝕏@adelysalbertoGitHub

ux-wireframing

Generates UX specifications and ASCII wireframes for UI layouts and user flows.

1|Updated Jul 18, 2025
Search Tags:#accessibility#specification#design tokens#wireframing#ui design#ux#user flow
One-click install
npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill ux-wireframing-adelysalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-wireframing
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-opencode/skills/ux-wireframing
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill ux-wireframing-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing consistent, accessible UI layouts without a structured process leads to cluttered screens, weak visual hierarchy, and missing interaction states. This Skill provides a repeatable framework for drafting UX specifications and wireframes before implementation. ## Core Features & Use Cases - Wireframe Patterns: Define screen anatomy with ASCII/Markdown layout diagrams covering headers, canvases, controls, and bottom bars. - Design Token Definition: Specify color palettes, typography scales, and visual personality for consistent theming. - Interaction State Coverage: Document initial, loading, success, and error states plus mobile touch targets and gestures. - Use Case: When planning a new navigation app screen, generate a complete UX specification in artifacts/ux_specification.md including wireframes, WCAG-compliant contrast rules, and responsive behavior. ## Quick Start Ask the agent to draft a UX specification and wireframe for your feature, for example: create a UX spec for a map-based tracking screen with a bottom action bar.

Frequently Asked Questions about ux-wireframing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a UX specification document for a new feature?▼

Define the feature name, then follow the specification structure covering visual personality, design tokens, screen wireframes, interaction states, and mobile responsiveness. The output is written to artifacts/ux_specification.md as a markdown document.

How to wireframe a UI layout without design tools?▼

Use ASCII or Markdown diagrams to map the spatial grid of each screen, dividing it into regions like top cards, main canvas, floating controls, and bottom bars. This communicates layout and responsive behavior without graphical software.

What accessibility standards should a UI specification include?▼

The specification enforces WCAG AA contrast with a minimum 4.5:1 ratio for normal text. Every interactive element must define focus, hover, and disabled states, and touch targets must be at least 44x44 points.

When should I use wireframing instead of high-fidelity mockups?▼

Use wireframes early in planning to validate layout, hierarchy, and user flows before investing in visual design. They are ideal for drafting UX specifications and aligning stakeholders, but do not replace final visual assets.

Related Skills

Explore More Design & Creative Skills→
code-vibe-academycode-vibe-academy
2

architecte-contenu

Structures website information with sitemaps, content strategy documents, and Markdown wireframes.

Official
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
nimadorostkarnimadorostkar
25

ui-review

Analyze interface designs for usability defects and hierarchy imbalances.

Community
Intermediate
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic