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

spacious

Generates implementation-ready design system guidelines using Spacious tokens and accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building clean, whitespace-driven interfaces often lack consistent, opinionated design-system guidance, leading to inconsistent spacing, typography, and inaccessible components across products. ## Core Features & Use Cases - Design Token Foundations: Provides a complete token set including colors (primary #3B82F6, secondary #8B5CF6, semantic states), typography scales (12/14/16/18/24/30/36 with Open Sans, Montserrat, IBM Plex Mono), and an 8pt baseline spacing grid. - Component Rule Authoring: Generates component-level guidance covering anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior. - Accessibility Acceptance Criteria: Produces testable WCAG 2.2 AA requirements including keyboard interaction, focus states, touch targets, and reduced-motion support. - Use Case: A product team standardizing their UI asks for button and form guidelines; the Skill outputs token-anchored rules, anti-patterns, migration notes, and a QA checklist ready for code review. ## Quick Start Use the spacious skill to write design-system guidelines for our form components following the Spacious token foundations.

Frequently Asked Questions about spacious

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

FAQPage Schema
How do I create design system guidelines for my UI components?▼

Define tokens and foundational constraints first, then specify component anatomy, states, variants, and interaction behavior. This Skill generates that structure with accessibility acceptance criteria, anti-patterns, and a QA checklist for code review.

What design tokens does the Spacious design system use?▼

Spacious uses primary #3B82F6, secondary #8B5CF6, semantic success/warning/danger colors, a 12/14/16/18/24/30/36 typography scale with Open Sans, Montserrat, and IBM Plex Mono, plus an 8pt baseline spacing grid.

Does this Skill cover accessibility requirements for components?▼

Yes, it targets 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.

What component states should design guidelines define?▼

Guidelines should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They should also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and empty states.

When should I not use a whitespace-focused minimal design system?▼

Generous whitespace layouts may not fit data-dense interfaces like trading dashboards or admin tables where information density matters more than breathing room. In those cases, choose a compact density-focused design system instead.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced
TarasTsavolykTarasTsavolyk
1

a11y-audit

Audit web UI components against WCAG 2.2 AA standards using axe and manual checks.

Community
Intermediate
nexu-ionexu-io
93.2k

minimalist-ui

Generate refined editorial-style web interfaces using a warm monochrome design system.

Official
Intermediate