skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

Energetic

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
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill energetic-superpollo02
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced
PiercingXXPiercingXX
1

energetic

Define Energetic design-system guidelines with token-first accessibility constraints and QA checklists.

Community
Intermediate
anonymouswhite07anonymouswhite07

minimalist-ui

Generate a minimalist UI protocol with strict typography and muted color rules for dashboards and editors.

Community
Advanced