skills.rest
brainbrewlabs
brainbrewlabsOFFICIAL
Explore all skills by this author →
GitHub

ui-design

Generate UI component specifications and WCAG 2.1 AA accessibility audits.

7|3|Updated Mar 17, 2026
Search Tags:#design#ui#accessibility#wcag#responsive#ux#component-spec
One-click install
npx skills add https://github.com/brainbrewlabs/brainbrew-devkit --skill ui-design-brainbrewlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/brainbrewlabs/brainbrew-devkit/tree/main/plugin/config/templates/develop/skills/ui-design
Command: npx skills add https://github.com/brainbrewlabs/brainbrew-devkit --skill ui-design-brainbrewlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a repeatable, designer-to-engineer specification process that eliminates ambiguity, surfaces accessibility gaps, and speeds implementation of UI components and patterns.

Core Features & Use Cases

  • Component Specifications: Define purpose, props, states, interactions, responsive behavior, and implementation notes for each component.
  • Accessibility Audits (WCAG 2.1 AA): Verify contrast ratios, keyboard navigation, ARIA roles, focus indicators, and touch target sizes.
  • Pattern Discovery & Consistency: Locate existing components and design tokens to ensure alignment with established spacing, color, and typography rules.
  • Use Case: Turn a product brief or mock into a developer-ready component spec and an accessibility checklist for implementation.

Quick Start

Review the feature brief and generate a component specification including states, props, responsive rules, and an accessibility checklist.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a UI component specification for developers?▼

Generate a UI component specification by defining its purpose, props, states, responsive behavior, and accessibility requirements. This process translates product briefs into developer-ready specs, ensuring engineers receive clear implementation notes alongside interaction details and responsive layout rules.

How do I check WCAG 2.1 AA compliance for interface elements?▼

Perform an accessibility audit to verify WCAG 2.1 AA compliance by inspecting color contrast metrics, keyboard navigation paths, ARIA attributes, focus indicators, and touch target sizes. This surfaces accessibility gaps and outputs a clear checklist for implementation.

Can I use this to review responsive layouts and design tokens?▼

Yes, you can review responsive layouts by locating existing components and design tokens to ensure alignment. This verifies that new UI patterns match established spacing, color, and typography rules across your component library.

What's the best way to audit keyboard navigation and ARIA roles?▼

Audit keyboard navigation and ARIA roles by inspecting existing component files to verify focus indicators and touch target sizes. This process outputs clear specs and implementation notes that eliminate ambiguity and surface accessibility gaps.

Do I need existing component files to generate accessibility checklists?▼

Yes, generating accessibility checklists requires inspecting existing component files, design tokens, and color contrast metrics. The Skill analyzes these inputs to produce developer-ready component specs and WCAG 2.1 AA compliance verification.

Why does my UI component spec need an accessibility checklist?▼

An accessibility checklist eliminates ambiguity and speeds implementation by verifying WCAG 2.1 AA requirements like ARIA attributes, keyboard navigation, and touch target sizes. It turns a product brief into a developer-ready component spec with clear implementation notes.

Related Skills

Explore More Design & Creative Skills→
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
aiunlocked1412aiunlocked1412
14

web-designer-pro

Generate mobile-first wireframes, design tokens, and developer handoff documentation for web pages.

Community
Advanced
joelklabojoelklabo

markdowntown-frontend

Guide Markdowntown frontend UX with design tokens and lint rules.

Community
Intermediate
bizoton19bizoton19

508-audit

Audit federal websites for WCAG 2.1 AA accessibility compliance.

Community
Advanced