skills.rest
alessioroberto82
alessioroberto82COMMUNITY
Explore all skills by this author →
GitHub

ux

Designs user flows, ASCII wireframes, and accessibility guidance from project requirements.

1|Updated Feb 19, 2026
Search Tags:#accessibility#mermaid#requirements#user flows#ux design#wireframes#interaction design
One-click install
npx skills add https://github.com/alessioroberto82/claude-plugin-circle --skill ux-alessioroberto82
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux
Source: https://github.com/alessioroberto82/claude-plugin-circle/tree/main/plugins/circle/skills/ux
Command: npx skills add https://github.com/alessioroberto82/claude-plugin-circle --skill ux-alessioroberto82

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning written requirements into concrete UI/UX design decisions is slow and often skipped, leading to interfaces that ignore user needs, accessibility, and platform conventions. ## Core Features & Use Cases - User Flow Mapping: Generates Mermaid flow diagrams showing complete user journeys from requirements documents. - Wireframe & Interaction Design: Produces ASCII wireframes for key screens plus interaction patterns, error states, and edge cases. - Accessibility & Platform Conventions: Builds in VoiceOver, Dynamic Type, and color contrast considerations aligned with platform design guidelines. - Use Case: After scoping a new feature, run this role to produce a ux-design.md document with flows and wireframes before handing off to architecture and implementation. ## Quick Start Ask the Experience Designer to create user flows and wireframes for the feature described in my requirements document.

Frequently Asked Questions about ux

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

FAQPage Schema
How do I generate wireframes from product requirements?▼

Run the Experience Designer role after requirements exist in the project output directory. It reads scope/requirements.md or refine/PRD.md and produces ASCII wireframes, Mermaid user flows, and interaction patterns saved as ux-design.md.

What does a UX design document for a software feature include?▼

The generated ux-design.md includes Mermaid user flow diagrams, ASCII screen wireframes, interaction patterns such as tap and swipe, accessibility considerations, platform convention compliance, and error state handling.

Can I run UX design without requirements documents?▼

No. The role checks for scope/requirements.md or refine/PRD.md in the project output directory first. If neither exists, it instructs you to run the scope role before proceeding with design work.

Does the UX role cover accessibility requirements?▼

Yes. Accessibility is treated as mandatory, covering VoiceOver support, Dynamic Type, and color contrast. The role designs for accessibility from the start rather than retrofitting it later.

What happens after the UX design is complete?▼

The role saves output to the project's output/ux directory and hands off with a suggestion to run the architecture role next, so technical design can build on the defined user flows and screens.

Related Skills

Explore More Design & Creative Skills→
codetail-aicodetail-ai

pm

Creates structured PRDs with user stories, acceptance criteria, and scope boundaries.

Official
Advanced
bacocobacoco
67

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

Community
Intermediate
YehudaFrankelYehudaFrankel
16

recall

Search read-only memory index for notes, decisions, and lessons by topic.

Community
Intermediate
DeiblerDeibler
8

iteration-prototype-fidelity

Selects the appropriate prototype fidelity for each iteration and research question.

Community
Intermediate