energetic

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

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill energetic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: energetic
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/energetic
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill energetic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Energetic turns a visual design direction into consistent, implementation-ready rules so teams can build UI that matches the Energetic aesthetic without guesswork or accessibility regressions.

Core Features & Use Cases

  • Token-first guidance: Converts the Energetic foundations (Limelight/JB Mono typography, Energetic orange palette, and 4px thick borders) into rules engineers can apply directly.
  • Component-level authoring workflow: Provides a structured process for defining anatomy, variants, interaction states, responsive behavior, and content tone.
  • Do/Don’t anti-patterns and QA gates: Enforces testable accessibility acceptance criteria and review-friendly QA checklists to prevent inconsistent UI and weak contrast.

Quick Start

Ask the AI to generate Energetic design-system rules for your button and card components using the required output structure and including explicit default, hover, focus-visible, active, disabled, loading, and error states.

Frequently Asked Questions about energetic

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

FAQPage Schema
How do I write design system guidelines for a vibrant UI with thick borders?▼

To write design system guidelines for a vibrant UI with thick borders, define token-first rules for typography, color palettes, and geometric component anatomy. This ensures expressive interfaces ship consistently without accessibility regressions by enforcing testable contrast constraints.

What is a token-first approach for documenting UI component states?▼

A token-first approach for documenting UI component states maps foundational design elements like Energetic orange palettes and 4px borders directly to explicit interaction states. It requires defining default, hover, focus-visible, active, disabled, loading, and error states using structured, testable accessibility constraints.

How do I generate do and don't anti-patterns for high-contrast design tokens?▼

Generate do and don't anti-patterns for high-contrast design tokens by authoring component rules within a structured output format. Include explicit interaction-state definitions and review-friendly QA checklists to prevent weak contrast and inconsistent UI implementation.

Does this design system authoring workflow require specific geometric UI components?▼

No, this design system authoring workflow does not require specific geometric UI components. It applies to any component rule authoring for interfaces needing expressive typography, high-contrast colors, and motion guidance, such as buttons and cards.

What's the best way to enforce accessibility constraints in design token documentation?▼

The best way to enforce accessibility constraints in design token documentation is to require testable acceptance criteria within a structured output format. Authoring rules with explicit do and don't anti-patterns and a QA checklist prevents accessibility regressions during implementation.