skills.rest
co-cddo
co-cddoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

UX Designer

Create user flows, wireframes, and WCAG 2.1 AA accessibility documentation.

Updated Dec 4, 2025
Search Tags:#accessibility#WCAG#design system#user flows#UX design#UI design#wireframes
One-click install
npx skills add https://github.com/co-cddo/innovation-sandbox-on-aws-deployer --skill ux-designer-co-cddo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Designer
Source: https://github.com/co-cddo/innovation-sandbox-on-aws-deployer/tree/main/.claude/skills/bmad/bmm/ux-designer
Command: npx skills add https://github.com/co-cddo/innovation-sandbox-on-aws-deployer --skill ux-designer-co-cddo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing user experiences that are both intuitive and accessible, while documenting them clearly for developers, can be a complex and time-consuming process. This Skill streamlines UX design, from user flows to wireframes and accessibility checks.

Core Features & Use Cases

  • User Flow & Wireframe Creation: Designs user journeys and screen layouts, using structured descriptions or ASCII art for clarity.
  • Accessibility Compliance: Ensures designs meet WCAG 2.1 AA standards, covering keyboard navigation, color contrast, and screen reader compatibility.
  • Design Documentation: Generates comprehensive design specifications, including component details, interaction patterns, and responsive behavior for developer handoff.
  • Use Case: Given a set of user stories, use this Skill to create a complete UX design, including user flows, wireframes for key screens, and detailed accessibility annotations, ready for review and implementation.

Quick Start

Create a comprehensive UX design for the 'MyApp' project based on the existing requirements. /create-ux-design

Frequently Asked Questions about UX Designer

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

FAQPage Schema
How do I create wireframes and user flows for my application?▼

Wireframes and user flows document screen layouts and user journeys using structured descriptions or ASCII art. This Skill guides you through designing key screens and mapping interaction paths, providing clear blueprints for developers to follow during implementation.

What does WCAG 2.1 AA compliance mean for my designs?▼

WCAG 2.1 AA is an accessibility standard ensuring designs work for users with disabilities. This Skill applies keyboard navigation, color contrast, and screen reader compatibility checks to meet AA standards, with AAA enhancements where feasible.

Can I design for mobile, tablet, and desktop all at once?▼

Yes. This Skill documents responsive behavior across mobile, tablet, desktop, web, and native platforms in a single design specification, ensuring your interface adapts consistently to different device sizes.

How do I hand off designs to developers?▼

This Skill generates comprehensive design documentation including component details, interaction patterns, and responsive guidelines. Developers receive detailed specifications ready for implementation without requiring design tool access.

Do I need to understand accessibility standards to use this?▼

No prior accessibility expertise required. This Skill embeds WCAG 2.1 AA compliance checks and accessibility annotations directly into the design process, guiding you through keyboard navigation, contrast, and screen reader requirements.

What's the fastest way to design a complete user experience from requirements?▼

Start with user stories and apply this Skill to generate user flows, wireframes for key screens, and accessibility annotations in one workflow. The structured approach produces a design ready for review and developer handoff.

Related Skills

Explore More Design & Creative Skills→
ksmuvvaksmuvva

requirements-engineering

Elicits and documents testable software requirements with prioritization and acceptance criteria.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate
ArieGoldkinArieGoldkin
10

design-system-starter

Generate design tokens, React component templates, and WCAG 2.1 accessibility documentation.

Community
Advanced
Shaarav4795Shaarav4795

wireframe-prototyping

Automate creation of wireframes and interactive prototypes for UI feedback.

Community
Intermediate