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

corporate

Generates enterprise design-system guidelines with tokens, component rules, and accessibility criteria.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building enterprise UIs often lack consistent, implementation-ready design guidance, leading to inconsistent spacing, inaccessible components, and ad-hoc styling decisions across products. ## Core Features & Use Cases - Design Token Foundations: Provides a complete corporate token set including colors (#3B82F6 primary, semantic states), typography (Poppins, Open Sans, IBM Plex Mono), and an 8pt spacing grid. - Component Rule Authoring: Defines anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior for UI components. - Accessibility Enforcement: Anchors every rule to WCAG 2.2 AA requirements with testable acceptance criteria, keyboard interaction specs, and 44px touch targets. - Use Case: A designer-engineer pair needs to standardize a SaaS dashboard; use this Skill to generate a full guideline document covering tokens, button states, form error handling, and a QA checklist for code review. ## Quick Start Generate corporate design-system guidelines for a data table component including states, accessibility criteria, and anti-patterns.

Frequently Asked Questions about corporate

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

FAQPage Schema
How do I create a corporate design system for enterprise UI?▼

Start by defining design tokens for color, typography, and spacing, then specify component anatomy, states, and variants. This Skill generates that structure using a corporate palette, Poppins/Open Sans typography, and an 8pt baseline grid.

What design tokens does a corporate design system need?▼

A corporate system needs semantic color tokens (primary, success, warning, danger, surface, text), typography scales with defined font families and weights, and spacing tokens on a consistent grid. This Skill provides all three with concrete hex values and rem sizes.

How do I write accessibility requirements for UI components?▼

Anchor each requirement to WCAG 2.2 AA criteria that are testable in code, such as visible focus states, keyboard interaction paths, 44px touch targets, and reduced-motion support. Avoid vague statements and pair every rule with acceptance criteria.

Does this design guidance work with any frontend framework?▼

Yes, the guidance is framework-agnostic because it defines tokens, states, and behavior rather than framework-specific code. Engineers can map the tokens to CSS variables, Tailwind config, or any component library.

What component states should enterprise UI guidelines cover?▼

Guidelines should cover default, hover, focus-visible, active, disabled, loading, and error states, plus responsive behavior and edge cases like long labels and empty states. This Skill enforces that full state matrix in its output structure.

Related Skills

Explore More Design & Creative Skills→
Kevin-MokKevin-Mok

typeset

Audit typography and implement consistent type scales and hierarchy across UI and content.

Community
Intermediate
TrimudTrimud

storefront-next

Enforce React 19 server components and SCAPI patterns for Storefront Next frontend development.

Community
Advanced
saschadudkin-sketchsaschadudkin-sketch

accessibility

Automate WCAG 2.2 accessibility audits for websites using Lighthouse and axe-core.

Community
Intermediate
CoRLab-TechCoRLab-Tech

carbon-icons

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

Official
Basic