skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

professional

Generate WCAG 2.2 AA design-system guidance for business UIs.

Updated May 13, 2026
Search Tags:#accessibility#design system#wcag 2.2#ui typography#component rules#token guidelines
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill professional-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: professional
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/professional
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill professional-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Professional design guidelines help teams avoid inconsistent UI styling by providing a clear, implementation-ready foundation for typography, color, spacing, accessibility, and interaction patterns.

Core Features & Use Cases

  • Modern business-ready system: defines a compact, mobile-first typography scale using Poppins plus IBM Plex Mono for labels, with explicit spacing rhythm and rounded-corner tokens.
  • Tokenized visual identity: standardizes primary/secondary/feedback states (success, warning, danger) and text/surface contrast-friendly usage for consistent component styling.
  • Accessibility-first interaction rules: mandates WCAG 2.2 AA alignment, keyboard-first behavior, and visible focus states, with quality gates that make rules testable in reviews.
  • Use case: generating or auditing an app’s buttons, inputs, cards, and layouts so they look trustworthy and behave correctly across hover/focus/disabled/error states.

Quick Start

Use the professional skill to generate UI component and accessibility guidance for a business-facing interface.

Frequently Asked Questions about professional

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

FAQPage Schema
How do I build a design system with WCAG 2.2 AA keyboard-first accessibility?▼

Implement a WCAG 2.2 AA keyboard-first design system by defining tokenized typography and spacing foundations using Poppins and IBM Plex Mono, enforcing visible focus states, and applying testable quality gates to all interaction states.

What are design tokens for standardizing UI component styling?▼

Design tokens standardize UI component styling by defining explicit color, spacing, and typography variables—such as FECE14-based palettes and Poppins scales—ensuring consistent visual identity across hover, focus, disabled, and error interaction states.

Can I use Poppins and IBM Plex Mono for a mobile-first business UI typography scale?▼

Yes, you can use Poppins and IBM Plex Mono to define a compact, mobile-first business UI typography scale with explicit spacing rhythm and rounded-corner tokens for accessible, polished layouts.

How do I audit component libraries for accessible interaction states?▼

Audit component libraries for accessible interaction states by validating buttons, inputs, and cards against testable quality gates anchored to token guidelines, ensuring correct behavior across hover, focus, disabled, and error states.

Does this design system approach work for generating consistent business app layouts?▼

Yes, this approach works for generating consistent business app layouts by applying tokenized visual identity foundations and accessibility-first interaction rules to produce trustworthy, correctly behaving components.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
bergsidebergside
2.3k

shadcn

Standardizes shadcn/ui-inspired component rules with token-first monochrome design guidance.

Official
Intermediate
bergsidebergside
2.3k

cosmic

Define tokenized typography, spacing, and color foundations for dark sci-fi UI.

Official
Intermediate