bold

Standardize Bold design-system guidance for UI components and accessibility.

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill bold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bold
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/bold
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill bold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent visual hierarchies by standardizing a Bold design system with high-contrast color, heavyweight typography, and clear interaction-ready rules.

Core Features & Use Cases

  • Style foundations: Establishes a bold typography scale (Archivo Black + JetBrains Mono), a defined spacing rhythm (4/8/12/16/24/32), and a consistent tokenized color palette for primary and semantic states.
  • Accessibility guardrails: Enforces WCAG 2.2 AA expectations such as keyboard-first interaction, visible focus states, and reduced-motion support.
  • Implementation-ready guidance: Provides do/don’t rules, component-level expectations (states/variants/anatomy), anti-patterns, and a QA checklist suitable for design reviews and engineering implementation.

Quick Start

Use the Bold design system skill to generate implementation-ready accessibility and token rules for the UI components you are designing today.

Frequently Asked Questions about bold

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

FAQPage Schema
How do I standardize typography and component states for UI accessibility?▼

To standardize typography and component states for UI accessibility, apply a token-first design system enforcing WCAG 2.2 AA expectations, defined spacing rhythm, and explicit interaction states like focus-visible and disabled to reduce visual inconsistency.

What design tokens and spacing scale are needed for a bold typography UI?▼

A bold typography UI requires tokenized color palettes for semantic states, a heavyweight typography scale using Archivo Black and JetBrains Mono, and a defined spacing rhythm of 4, 8, 12, 16, 24, and 32.

How do I create a design QA checklist for WCAG 2.2 AA compliance?▼

Create a design QA checklist for WCAG 2.2 AA compliance by defining do/don't rules, component anatomy, anti-patterns, and testable acceptance criteria covering keyboard-first interaction, visible focus states, and reduced-motion support.

Does this design system guidance include rules for component interaction states?▼

Yes, this design system guidance includes explicit rules for component interaction states. It defines anatomy expectations and testable acceptance criteria for hover, focus-visible, active, disabled, loading, and error states.

What is the best way to prevent visual hierarchy inconsistency during engineering handoff?▼

The best way to prevent visual hierarchy inconsistency during engineering handoff is to provide implementation-ready guidance with token-first rules, anti-patterns, and a QA checklist standardizing typography scales and tokenized color palettes.