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.