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

vibrant

Generates implementation-ready design-system guidelines using Vibrant color, typography, and spacing tokens.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building UIs with the Vibrant visual style often lack consistent, opinionated rules for applying its color palette, typography scale, and spacing rhythm, leading to inconsistent components and accessibility gaps. ## Core Features & Use Cases - Token-Driven Guidance: Anchors every rule to concrete Vibrant tokens such as primary #7C61D4, the 14/16/18/24/32/40 typography scale, and the 2/4/8/12/16/24/32/48 spacing scale. - Component Rule Authoring: Produces component anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior specifications. - Accessibility Acceptance Criteria: Enforces WCAG 2.2 AA requirements including keyboard-first interactions, visible focus states, and 44px+ touch targets. - Use Case: A designer asks for button component guidelines; the Skill outputs token usage, interaction states, anti-patterns, and a QA checklist ready for code review. ## Quick Start Use the vibrant skill to write design-system guidelines for a card component including states, accessibility criteria, and a QA checklist.

Frequently Asked Questions about vibrant

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

FAQPage Schema
How do I create design-system guidelines for a specific component?▼

Request guidelines for the component and the Skill follows a fixed workflow: restate design intent, define tokens, specify anatomy and states, add accessibility criteria, list anti-patterns, and end with a QA checklist. All rules anchor to Vibrant tokens rather than vague adjectives.

What color and typography tokens does the Vibrant style use?▼

Vibrant uses primary #7C61D4, secondary #EAAE87, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Noto Sans as primary, Fascinate for display, and Fira Code for mono, on a 14/16/18/24/32/40 scale.

Does the Vibrant skill cover accessibility requirements?▼

Yes, every guideline includes WCAG 2.2 AA requirements: keyboard-first interactions, visible focus states, screen-reader tested labels, reduced-motion support, 44px+ touch targets, and high-contrast support. Each accessibility statement must be testable in implementation.

What component states does the guideline output include?▼

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

When should I not use the Vibrant design style?▼

Vibrant's bold, playful typography and warm accents suit lively consumer-facing products. For conservative enterprise, legal, or data-dense interfaces, a more restrained neutral design system is typically a better fit.

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
yrlanrteixeirayrlanrteixeira

vibrant-playful

Generate vibrant, playful landing pages with saturated colors and bouncy animations.

Community
Advanced