power

Generates design-system guidelines using dark-theme tokens, typography scales, and accessibility rules.

Updated Aug 31, 2026

Search Tags:#typography #accessibility #design system #design tokens #ui design #component guidelines #dark theme

One-click install

npx skills add https://github.com/MANR255926/GARAGE --skill power-manr255926

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: power
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/power
Command: npx skills add https://github.com/MANR255926/GARAGE --skill power-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building premium dark-themed interfaces often lack consistent, implementation-ready design guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component states. This Skill turns the Power design foundations into concrete, testable rules for engineers and designers. ## Core Features & Use Cases - Token-Driven Guidance: Anchors every rule to defined tokens such as Oswald typography, an 8pt spacing grid, and a monochromatic dark palette. - Component-Level Rules: Produces anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior for UI components. - Accessibility Acceptance Criteria: Enforces keyboard-first interactions, visible focus states, semantic HTML, and 44px touch targets with testable requirements. - Use Case: When building a new dashboard page, ask for component guidelines and receive a structured spec covering tokens, states, anti-patterns, and a QA checklist ready for code review. ## Quick Start Generate design-system guidelines for a button component following the Power dark aesthetic with full state and accessibility rules.

Frequently Asked Questions about power

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

FAQPage Schema

What accessibility rules should a design system include?▼

A design system should require keyboard-first interactions, visible focus states, semantic HTML before ARIA, 44px minimum touch targets, and high-contrast support. Each rule must be testable in implementation, not just aspirational.

How do I document component states like hover and focus-visible?▼

List every required state explicitly: default, hover, focus-visible, active, disabled, loading, and error. Describe keyboard, pointer, and touch behavior for each, and anchor styling to tokens rather than raw values.

Can I use these guidelines with any frontend framework?▼

Yes, the output is framework-agnostic guidance covering tokens, component rules, and QA checklists. Engineers can map the semantic tokens and state rules to React, Vue, or plain CSS implementations.

What are common dark theme design mistakes to avoid?▼

Common mistakes include low-contrast text, inconsistent spacing rhythm, and ambiguous labels. The Skill flags conflicts between aesthetics and accessibility and prioritizes accessibility when they collide.