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

bold

Generate bold design system tokens and component rules with WCAG 2.2 AA accessibility.

Updated May 13, 2026
Search Tags:#typography#accessibility#design systems#design tokens#interaction states#component guidelines#high contrast
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill bold-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bold
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/bold
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill bold-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams implement a bold, high-contrast design language with heavyweight typography and consistent spacing while staying accessible.

Core Features & Use Cases

  • Token-first visual system: Uses defined color, typography, rounded corners, and spacing scales to keep UI consistent.
  • Commanding component guidance: Provides rules for hierarchy, interaction states, and variant consistency.
  • Accessibility and QA gates: Enforces WCAG 2.2 AA, keyboard-first behavior, visible focus, and testable quality checks.

Quick Start

Use the bold design skill to generate component rules and token mappings for a new design system page that needs strong visual presence and accessible interactions.

Frequently Asked Questions about bold

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

FAQPage Schema
How do I create a high contrast design system that meets WCAG 2.2 AA standards?▼

To create a high contrast design system meeting WCAG 2.2 AA, use semantic design tokens for color and typography, enforce keyboard-first interactions, and apply testable QA acceptance criteria to interactive components.

What is the best way to establish consistent spacing and typography across UI components?▼

The best way to establish consistent spacing and typography is by defining a token-first visual system with heavyweight typography, rounded geometry, and spacing scales to maintain clear hierarchy across all components.

How do I define explicit interaction states for buttons and forms?▼

You define explicit interaction states by applying commanding component guidance rules that enforce variant consistency, visible focus, and keyboard-first behavior across buttons, forms, and navigation elements.

Can I use design tokens to enforce accessibility in engineering and design workflows?▼

Yes, you can use semantic design tokens to enforce accessibility in engineering and design workflows by mapping color and spacing scales to WCAG 2.2 AA requirements and testable QA gates.

Does heavyweight typography work with keyboard-first interaction patterns?▼

Yes, heavyweight typography works seamlessly with keyboard-first interaction patterns by combining clear visual hierarchy with explicit interaction states and visible focus indicators for accessible navigation.

What are the limitations of using a token-first visual system for component guidelines?▼

A token-first visual system requires strict adherence to predefined color, spacing, and rounded geometry scales, meaning custom overrides may break consistency and fail the enforced testable QA acceptance criteria.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate
canyouseeuscanyouseeus

noir-design

Enforce Noir aesthetic standards on UI components during creation and reviews.

Community
Intermediate
superpollo02superpollo02

riso

Generate risograph-inspired design system guidance for UI components with WCAG 2.2 AA keyboard-first rules.

Community
Intermediate