Energetic

Name: Energetic
Availability: InStock
Author: superpollo02

Implement tokenized thick-bordered UI components with WCAG 2.2 AA interaction states.

Updated May 13, 2026

Search Tags:#accessibility #design tokens #interaction states #component guidelines #thick borders #energetic ui #vibrant color palette

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill energetic-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Energetic
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/energetic
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill energetic-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Energetic provides clear, implementation-ready rules to consistently create high-contrast, geometric, thick-bordered interfaces with expressive typography and accessible interaction states.

Core Features & Use Cases

Tokenized foundations: Prescribes the primary/secondary/background/surface/text/neutral color set plus spacing and typography scales (Limelight + JetBrains Mono).
Component-ready styling rules: Defines how to apply thick 4px borders, preserve visual hierarchy, and handle interaction states (default/hover/focus-visible/active/disabled/loading/error as relevant).
Accessibility and QA gates: Enforces WCAG 2.2 AA expectations with testable acceptance criteria and an opinionated do/don’t set for consistent engineering outcomes.

Quick Start

Apply the Energetic skill instructions to your UI components to generate an accessible, token-consistent design that uses 4px thick borders, vibrant orange accents, and snap-based motion.

Frequently Asked Questions about Energetic

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

FAQPage Schema

How do I build a thick-bordered UI design system with accessible interaction states?▼

Build a thick-bordered UI design system by applying tokenized typography, color, and spacing rules to define 4px borders, vibrant accents, and explicit default, hover, focus-visible, and active interaction states across components.

What are the best design tokens for creating vibrant, high-contrast interface components?▼

The best design tokens for vibrant interfaces include primary, secondary, background, surface, text, and neutral color sets, paired with Limelight and JetBrains Mono typography scales to maintain visual hierarchy and consistency.

Can I use energetic UI guidelines to ensure WCAG 2.2 AA compliance for interactive components?▼

Yes, energetic UI guidelines ensure WCAG 2.2 AA compliance by enforcing testable acceptance criteria and explicit interaction state rules across keyboard, pointer, and touch experiences for buttons, inputs, and modals.

How do you style focus-visible and hover states for 4px thick-bordered components?▼

Style focus-visible and hover states for 4px thick-bordered components by applying tokenized color variations and snap-based motion rules to guarantee clear visual hierarchy and deterministic accessibility feedback.

Does this design token approach work for both web navigation and modal interactions?▼

Yes, this design token approach works for web navigation and modal interactions by providing opinionated do and don’t rules that standardize component styling, spacing, and border application across all interactive elements.