Accessible Component Pattern Designer
Design accessible UI components with semantics, keyboard behavior, focus, states, announcements, content rules, and tests.
Accessible Component Pattern Designer is a free AI skill for ui & web building. Design accessible UI components with semantics, keyboard behavior, focus, states, announcements, content rules, and tests. It works with Claude, ChatGPT and is ready to use out of the box.
About this skill
Design accessible UI components with semantics, keyboard behavior, focus, states, announcements, content rules, and tests. This skill converts user goals, product constraints, existing design evidence, and technical behavior into a structured UX specification.
What it does
The skill analyzes the user journey, product behavior, visual and interaction context, accessibility needs, responsive constraints, edge cases, and available evidence; then produces a professional design plan with clear states, priorities, tests, and implementation criteria.
What is included
- Pattern context
- Semantic structure
- Keyboard interaction
- Focus behavior
- States and announcements
- Content rules
- Responsive behavior
- Accessibility tests
How to use it
1. Download the accessible-component-pattern-designer-SKILL.md file 2. Upload it to your design or product workspace 3. Provide the current screens, users, goals, constraints, and evidence 4. Add technical, accessibility, responsive, and brand requirements 5. Use the final specification for design, implementation, and review
Examples
Design an accessible command palette with search, grouped results, keyboard navigation, empty states, and recent actions.
A complete professional deliverable covering user goals, structure, interaction rules, responsive behavior, accessibility, edge states, validation, and implementation criteria.
FAQ
What is this skill for?
Can it improve an existing design?
Does it include accessibility?
Can it work without analytics?
Does it create final visual files?
How is this different from a generic design prompt?
Related Skills
Frontend Accessibility Compliance Reviewer
Review frontend interfaces for accessibility, keyboard use, semantics, focus, forms, contrast, motion, and assistive technology support.
SaaS Design System Architect
Build scalable SaaS design systems with foundations, tokens, components, states, patterns, accessibility, governance, and documentation.
Dashboard Widget and Personalization UX Architect
Design customizable dashboards with widget hierarchy, defaults, layout, permissions, empty states, responsive behavior, accessibility, and saved preferences.
Related Prompts
Accessibility Acceptance Criteria Builder
Turn a feature brief into concrete accessibility behavior, acceptance criteria, and tests that an AI coding assistant can implement and verify.
Accessibility Quick Audit
Reviews a described website or app interface against core accessibility principles, flagging likely issues for users with visual, motor, or cognitive differences.
Design System Component Specification Writer
Turn a UI component into an implementation-ready specification covering anatomy, states, behavior, content, accessibility, tokens, and quality checks.