flat
CommunityGenerate accessible, minimalist UI guidance
Design & Creative#typography#accessibility#design system#design tokens#ui guidelines#component states
AuthorPiercingXX
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Flat helps teams create consistent, implementation-ready design system guidance for a minimalist, two-dimensional interface style while staying readable, accessible, and fast.
Core Features & Use Cases
- Provides token-based foundations: Defines typography scale, font choices, spacing rhythm, and a named color palette (e.g., primary, success, warning, danger, surface, text) that can be reused across components.
- Turns style intent into engineering rules: Specifies what to do and what to avoid (including interaction states and empty/loading/error states) so teams can apply the style consistently.
- Includes quality gates and acceptance criteria: Establishes testable accessibility requirements (e.g., WCAG 2.2 AA) and a QA checklist for code review.
Quick Start
Ask the AI to produce component-level UI guidance for buttons, inputs, and empty/error states using Flat tokens and accessibility rules, including concrete do/don’t examples and a code-review QA checklist.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: flat Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#flat Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.