skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

flat

Generate WCAG 2.2 AA-compliant UI component instructions with tokenized colors, typography, and spacing.

Updated May 13, 2026
Search Tags:#accessibility#design system#typography scale#ui tokens#keyboard-first#component states#flat ui
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill flat-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flat
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/flat
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill flat-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flat helps teams standardize a clean two-dimensional design language so AI-generated and human-authored interfaces stay consistent, fast, and accessible without relying on 3D effects.

Core Features & Use Cases

  • Vibrant tokenized color system using primary, secondary, success, warning, danger, surface, and text for reliable visual hierarchy.
  • Typography and spacing foundations (Inter + JetBrains Mono, and scales like 12/14/16/20/24/32 and 4/8/12/16/24/32) to keep layouts consistent across components.
  • Accessibility-first interaction and writing rules aligned to WCAG 2.2 AA with keyboard-first behavior and explicit focus expectations, suitable for dashboards, forms, navigation, and general UI component libraries.

Quick Start

Ask an agent to generate Flat-compliant UI components that use the provided tokens for color, typography, spacing, and explicit interactive states that meet WCAG 2.2 AA.

Frequently Asked Questions about flat

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

FAQPage Schema
How do I create a flat UI design system with accessible tokens?▼

This approach uses tokenized colors, typography scales, and spacing rules to enforce WCAG 2.2 AA compliance, ensuring consistent two-dimensional enterprise interfaces without relying on 3D effects.

What typography and spacing scales work best for flat UI components?▼

Flat UI components work best with defined typography and spacing scales like Inter and JetBrains Mono fonts at 12/14/16/20/24/32 sizes, paired with 4/8/12/16/24/32 spacing increments to keep layouts visually consistent.

How do I design accessible component states for enterprise dashboards?▼

Accessible component states for enterprise dashboards require explicit visual and interactive definitions across default, hover, focus-visible, active, disabled, loading, and error phases using semantic tokens to meet keyboard-first navigation rules.

Does this flat UI approach meet WCAG 2.2 AA keyboard-first requirements?▼

Yes, this flat UI approach meets WCAG 2.2 AA keyboard-first requirements by enforcing visible focus expectations and testable QA checklists across all generated navigation, form, and status feedback components.

When should I avoid using 3D effects in favor of a flat design system?▼

You should avoid 3D effects in favor of a flat design system when you need to standardize a clean two-dimensional language that ensures fast, consistent, and accessible AI-generated or human-authored enterprise interfaces.

Related Skills

Explore More Design & Creative Skills→
Jorge-IvanJorge-Ivan
1

component-variants

Manages Glass, Outline, and Flat UI component variants with dark mode and hover states using CVA-style props.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
superpollo02superpollo02

dramatic

Generate design tokens and component rules for high-contrast UI.

Community
Intermediate
GeneralJerelGeneralJerel

Skeuomorphism

Apply skeuomorphic design principles to UI components using CSS gradients, layered shadows, and texture patterns.

Community
Intermediate