skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

bold

Generates implementation-ready design-system guidelines using Bold style tokens and accessibility rules.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#component guidelines#UI style
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill bold-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bold
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/bold
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill bold-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces with a bold visual identity often lack consistent, documented rules for typography, color, spacing, and component states, leading to fragmented UI and accessibility gaps. ## Core Features & Use Cases - Design Token Foundations: Provides a defined palette (primary #0077BC, secondary #009866, semantic states), Archivo Black and JetBrains Mono typography, and a 4/8/12/16/24/32 spacing scale. - Structured Guideline Authoring: Produces component-level rules covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Enforcement: Anchors every rule to WCAG 2.2 AA criteria, keyboard-first interactions, visible focus states, and 44px+ touch targets. - Use Case: A designer asks for button component guidelines; the Skill outputs token-based rules, interaction states, anti-patterns, and a QA checklist ready for code review. ## Quick Start Use the bold skill to write design-system guidelines for a primary button component including states and accessibility criteria.

Frequently Asked Questions about bold

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

FAQPage Schema
How do I create design-system guidelines for a bold visual style?▼

Define tokens first (colors, typography, spacing), then specify component anatomy, states, and variants. This Skill provides the Bold foundations—Archivo Black typography, #0077BC primary, 4/8 spacing scale—and a structured authoring workflow for implementation-ready rules.

What color and typography tokens does the Bold design system use?▼

Bold uses primary #0077BC, secondary #009866, success #16A34A, warning #D97706, danger #DC2626, with Archivo Black for headings and body, JetBrains Mono for labels, and a 4/8/12/16/24/32 spacing scale.

Does the Bold skill support WCAG accessibility requirements?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions, visible focus states, screen-reader tested labels, reduced-motion support, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

What component states should design-system rules define?▼

Rules should cover default, hover, focus-visible, active, disabled, loading, and error states as relevant. The Skill also requires keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I not use a bold heavyweight typography style?▼

Avoid bold expressive scales for dense data interfaces or long-form reading where heavyweight fonts reduce legibility. The Skill prioritizes accessibility over aesthetics and flags conflicts when visual style harms clarity.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
daodaoleedaodaolee

design-system-patterns

Define design tokens and implement theming with CSS custom properties.

Community
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
deepparserdeepparser

design-pinterest

Apply Pinterest's design system tokens and component styles when generating UI.

Official
Basic