skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

enterprise

Generates implementation-ready design-system guidelines for dark-themed enterprise dashboards.

Updated Aug 31, 2026
Search Tags:#accessibility#design system#dashboard#design tokens#wcag#component guidelines#dark theme
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill enterprise-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: enterprise
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/enterprise
Command: npx skills add https://github.com/MANR255926/GARAGE --skill enterprise-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building dark-themed, cloud-platform-style dashboards often lack consistent design-system rules, leading to inconsistent spacing, inaccessible contrast, and ad-hoc component behavior. This Skill produces opinionated, implementation-ready design-system guidance grounded in defined tokens and accessibility standards. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #0C5CAB, surface #09090b), IBM Plex Sans typography scale (12/14/16/20/24/32), and an 8pt spacing baseline. - Component-Level Rules: Specifies anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for components. - Accessibility & QA Gates: Enforces WCAG 2.2 AA, keyboard-first interactions, testable acceptance criteria, anti-patterns, and a code-review QA checklist. - Use Case: A team building a productivity monitoring dashboard asks for button and data-table guidelines; the Skill outputs token-anchored rules, state definitions, accessibility criteria, and migration notes for inconsistent legacy UI. ## Quick Start Use the enterprise skill to generate design-system guidelines for a data table component in my dark-themed dashboard.

Frequently Asked Questions about enterprise

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

FAQPage Schema
How do I create design-system guidelines for a dark-themed dashboard?▼

Start by defining tokens for color, typography, and spacing before writing component rules. This Skill generates guidelines anchored to tokens like primary #0C5CAB, an IBM Plex Sans type scale, and an 8pt spacing baseline, with states and accessibility criteria per component.

What accessibility standards should dashboard components meet?▼

The guidelines target WCAG 2.2 AA with keyboard-first interactions, visible focus states, semantic HTML before ARIA, reduced-motion support, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

Which component states should design-system rules define?▼

Rules should cover default, hover, focus-visible, active, disabled, loading, and error states as relevant. Each rule must specify keyboard, pointer, and touch interaction behavior plus responsive and edge-case handling like long labels and empty states.

Can I use these guidelines to migrate inconsistent legacy UI?▼

Yes, the workflow includes anti-patterns and migration notes for existing inconsistent UI. New patterns must include migration guidance, and every do-rule is paired with a concrete don't-example to flag prohibited implementations.

When should I prioritize accessibility over visual design choices?▼

Always prioritize accessibility when conflicts arise between aesthetics and accessibility. The Skill's quality gates require flagging such conflicts explicitly and favoring system consistency over one-off local optimizations.

Related Skills

Explore More Design & Creative Skills→
GP-SoftwareDivisionGP-SoftwareDivision

normalize

Align UI features with design system tokens and components.

Official
Advanced
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
CoRLab-TechCoRLab-Tech

carbon-icons

Guide Carbon Design System icon imports, sizing, color, alignment, and touch targets in React.

Official
Basic