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

professional

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building business-facing UIs often lack consistent, implementation-ready design guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component behavior. This Skill turns a defined brand foundation into concrete design-system rules engineers and designers can apply directly. ## Core Features & Use Cases - Token-Driven Foundations: Defines color, typography, spacing, and radius tokens (Poppins, IBM Plex Mono, #FECE14 primary, 4/8/12/16/24/32 spacing) as the basis for all rules. - Component-Level Guidance: Produces anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior rules for UI components. - Accessibility Acceptance Criteria: Anchors every rule to WCAG 2.2 AA with testable requirements, anti-patterns, and a QA checklist for code review. - Use Case: An electronics shop storefront needs a unified checkout UI. Use this Skill to generate button, form, and card rules with explicit tokens, keyboard interaction behavior, and migration notes for legacy inconsistent styles. ## Quick Start Generate design-system guidelines for the checkout form components using the professional brand tokens and include accessibility acceptance criteria.

Frequently Asked Questions about professional

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

FAQPage Schema
How do I create a design system for a business website?▼

Start by defining foundational tokens for color, typography, and spacing, then write component-level rules covering anatomy, variants, and states. This Skill generates that guidance using Poppins typography, a #FECE14 primary palette, and a 4/8/12/16/24/32 spacing scale.

How to write component rules with accessibility acceptance criteria?▼

Anchor every rule to a token, threshold, or concrete example rather than vague adjectives, and define required states like focus-visible, disabled, and error. Each accessibility statement must be testable in implementation, following WCAG 2.2 AA with keyboard-first interactions.

What design tokens does the professional theme include?▼

The theme includes primary #FECE14, secondary #000000, success #16A34A, warning #D97706, danger #DC2626, plus surface and text tokens. Typography uses Poppins with IBM Plex Mono for mono labels, and spacing follows a 4/8/12/16/24/32 scale.

Does this design guidance support WCAG accessibility compliance?▼

Yes, the Skill targets WCAG 2.2 AA with visible focus states, keyboard-first interactions, and explicit contrast rules. When aesthetics conflict with accessibility, the guidance prioritizes accessibility and flags the conflict.

When should I not use a token-based design system approach?▼

Token-based systems add overhead for one-off prototypes or throwaway pages where consistency across a product is not needed. They deliver the most value when multiple components or teams must share the same visual language over time.

Related Skills

Explore More Design & Creative Skills→
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
Project-N-E-K-OProject-N-E-K-O
2.4k

frontend-design

Design and implement distinctive frontend interfaces with HTML/CSS/JS or React/Vue components.

Official
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

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

Official
Advanced
sevenbelowllcsevenbelowllc

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and CVA.

Official
Advanced