skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

colorful

Generate Colorful design-system guidelines with WCAG 2.2 AA accessibility requirements.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design system#color palette#typography scale#ui tokens#component states#guideline authoring
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill colorful-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorful
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/colorful
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill colorful-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns the Colorful design system into clear, implementation-ready rules so teams can build consistent, accessible, vibrant interfaces.

Core Features & Use Cases

  • Color token guidance: Establishes primary/secondary/success/warning/danger/surface/text/neutral tokens (e.g., primary #3B82F6) and directs engineers to prefer semantic tokens over raw hex values.
  • Typography and spacing standards: Specifies the Inter + JetBrains Mono typography scale (12/14/16/20/24/32) with explicit font weights and an 8pt baseline grid.
  • Accessibility-first behavior: Defines testable WCAG 2.2 AA expectations including visible focus states, keyboard-first interaction, reduced-motion support, and touch target sizing.
  • Opinionated component rule authoring: Provides a repeatable workflow and required output structure for producing component guidance with required states (default/hover/focus-visible/active/disabled/loading/error as applicable) plus QA checklists and anti-patterns.

Quick Start

Ask for Colorful design-system guidance for a specific component (for example, a button) that includes tokens, states, accessibility acceptance criteria, anti-patterns, and a code-review QA checklist.

Frequently Asked Questions about colorful

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

FAQPage Schema
How do I write design system guidelines that ensure UI components meet WCAG 2.2 AA accessibility requirements?▼

Design system guidelines for accessible UI components require defining testable WCAG 2.2 AA expectations, including visible focus states, keyboard-first interaction, reduced-motion support, and minimum touch target sizing.

What is the best way to structure component states like hover, focus-visible, and loading in a design system?▼

Structuring component states in a design system requires an opinionated workflow that defines default, hover, focus-visible, active, disabled, loading, and error states, complemented by anti-patterns and a QA checklist.

How do I set up typography scales and spacing standards for a consistent UI design system?▼

Setting up typography scales and spacing standards involves specifying font families, explicit weights, and size scales like 12/14/16/20/24/32, anchored to an 8pt baseline grid for consistent UI layout.

Can I use semantic color tokens instead of raw hex values for UI design system components?▼

Yes, using semantic color tokens for UI design system components is strongly preferred over raw hex values to establish primary, secondary, success, warning, danger, surface, text, and neutral color categories.

Does a design system guideline need to include anti-patterns and code-review checklists for component rules?▼

Yes, an implementation-focused design system guideline requires including anti-patterns and code-review QA checklists within component rules to ensure consistent, accessible, and vibrant interface production.

Related Skills

Explore More Design & Creative Skills→
Fire-ants-never-dieFire-ants-never-die

orchestrator-designer

Generate design tokens and component specifications for the Claude Orchestrator UI.

Official
Intermediate
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced
superpollo02superpollo02

gradient

Define token-based UI styling guidance with WCAG 2.2 AA accessibility.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate