ux-patterns

Name: ux-patterns
Availability: InStock
Author: Copilot

Document task flows, service blueprints, and accessibility guidelines for product design.

13|3|Updated Dec 21, 2025

Search Tags:#accessibility #wireframes #design-patterns #interaction-design #ux-patterns #task-flow

Ready to run

npx skills add https://github.com/Everyone-Needs-A-Copilot/claude-copilot --skill ux-patterns-everyone-needs-a-copilot

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-patterns
Source: https://github.com/Everyone-Needs-A-Copilot/claude-copilot/tree/main/templates/skills/ux-patterns
Command: npx skills add https://github.com/Everyone-Needs-A-Copilot/claude-copilot --skill ux-patterns-everyone-needs-a-copilot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns and guidelines to design robust, accessible user experiences across flows, wireframes, and service blueprints.

Core Features & Use Cases

Comprehensive task-flow patterns that cover primary, alternative, and error paths.
Service blueprint templates for frontstage and backstage interactions.
Accessibility-focused design guidance from keyboard navigation to screen reader support.

Quick Start

Generate a task-flow pattern for a new onboarding flow with wireframes and WCAG-aligned accessibility notes.

Frequently Asked Questions about ux-patterns

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

FAQPage Schema

How do I design a task flow that covers error paths and alternative routes?▼

To design task flows, this skill provides ready-made patterns that document primary, alternative, and error paths. These patterns guide the creation of robust product flows for onboarding and feature designs.

What is a service blueprint and how does it map frontstage and backstage interactions?▼

A service blueprint is a template that maps frontstage and backstage interactions. This skill provides service blueprint patterns to document user interactions and support processes across web and mobile interfaces.

How do I add WCAG-aligned accessibility notes to my wireframes?▼

To add accessibility notes to wireframes, this skill provides accessibility-focused design guidance covering keyboard navigation and screen reader support. It ensures wireframes meet WCAG-aligned accessibility guidelines.

Can I use these UX patterns for both web and mobile interface design?▼

Yes, you can use these UX patterns for both web and mobile interface design. The patterns apply to product design contexts including onboarding, feature flows, and usability improvements across different interface platforms.

What's the best way to document a state coverage matrix for a new feature flow?▼

The best way to document a state coverage matrix is to use this skill's ready-made templates. It documents state coverage matrices alongside task flows to guide design systems integration for new product features.