skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

professional

Generate WCAG 2.2 AA-aligned design system guidance with token-based constraints and QA criteria.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#design tokens#quality gates#UI components#interaction states
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill professional-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: professional
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/professional
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill professional-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create consistent, trustworthy design system guidance for business-ready interfaces without sacrificing accessibility or clarity.

Core Features & Use Cases

  • Design foundations: Defines typography, color, spacing, and rounded tokens for a modern electronics-shop aesthetic.
  • Accessibility-first rules: Enforces WCAG 2.2 AA, keyboard-first interaction patterns, and visible focus states.
  • Implementation-ready constraints: Provides do/don’t rules, quality gates, and a QA checklist suitable for code review.

Quick Start

Ask your AI to generate component-level rules for buttons, inputs, and cards for a responsive electronics storefront using the Professional tokens and accessibility requirements.

Frequently Asked Questions about professional

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

FAQPage Schema
How do I generate accessible UI component rules for a business design system?▼

You define design tokens for typography, color, and spacing, then apply explicit interaction state definitions and WCAG 2.2 AA keyboard-first behavior to build consistent component families for modern product interfaces.

What is a design token system for business UI and how does it handle accessibility?▼

A design token system standardizes typography, spacing, and color values while enforcing WCAG 2.2 AA compliance, keyboard-first interaction patterns, and visible focus states across all generated UI components.

How do I create testable QA acceptance criteria for UI components?▼

Create testable QA acceptance criteria by establishing do/don't rules, quality gates, and a checklist that validates token-based constraints and keyboard-first interaction states suitable for code review.

Can I use this design system approach for a responsive electronics storefront?▼

Yes, the approach applies to responsive electronics storefronts by generating component-level rules for buttons, inputs, and cards using predefined Professional tokens and strict accessibility requirements.

What are the limitations of using token-based constraints for UI design systems?▼

Token-based constraints require strict adherence to predefined typography and spacing values, meaning custom UI elements outside the defined modern product interface aesthetic may lack generated guidance or testable QA rules.

Related Skills

Explore More Design & Creative Skills→
ncsound919ncsound919

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Advanced
PiercingXXPiercingXX
1

lingo

Generate implementation-ready design-system guidelines with WCAG 2.2 AA acceptance criteria.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

flat

Standardize minimalist UI design with semantic tokens for colors, typography, and spacing.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate