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

colorful

Generates design-system guidelines using vibrant color tokens, typography scales, and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building vibrant, high-contrast interfaces often lack consistent, implementation-ready design-system documentation, leading to inconsistent components, accessibility gaps, and ad-hoc styling decisions. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #3B82F6, secondary #8B5CF6, semantic states), Inter/JetBrains Mono typography scales, and 8pt spacing grids. - Structured Guideline Authoring: Produces component rules covering anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior. - Accessibility Enforcement: Embeds WCAG 2.2 AA criteria, keyboard-first interactions, and testable acceptance criteria into every guideline. - Use Case: A designer asks for button component guidelines; the Skill outputs token-anchored rules with states, anti-patterns, migration notes, and a QA checklist for code review. ## Quick Start Ask the AI to generate design-system guidelines for a button component following the Colorful style foundations.

Frequently Asked Questions about colorful

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

FAQPage Schema
How do I create design system guidelines for UI components?▼

Follow the six-step authoring workflow: restate design intent, define tokens and foundations, specify component anatomy and states, add accessibility acceptance criteria, list anti-patterns, and end with a QA checklist executable in code review.

What color tokens does the Colorful design system use?▼

The palette includes primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Typography uses Inter with JetBrains Mono for labels on a 12/14/16/20/24/32 scale.

Does this design system support WCAG accessibility requirements?▼

Yes, it enforces WCAG 2.2 AA with keyboard-first interactions, visible focus states, semantic HTML before ARIA, reduced-motion support, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

What component states should design guidelines define?▼

Guidelines must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They should also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I use semantic tokens instead of raw color values?▼

Always prefer semantic tokens over raw hex values to preserve visual hierarchy and system consistency. Raw values break theming and make migration harder; the Skill explicitly flags this as a prohibited anti-pattern.

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
IgniteUIIgniteUI
136

igniteui-react-customize-theme

Apply CSS tokens and Sass themes to Ignite UI React apps.

Official
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

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

Official
Advanced
ishiyanishiyan

material-design-3-color

Generate Material Design 3 semantic color tokens for light and dark themes.

Community
Advanced