flat

Name: flat
Availability: InStock
Author: superpollo02

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

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill flat-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

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.