{"id":"37cc54d0-51fc-4bbf-b4ca-5bbbfbe04420","shortId":"acBtv3","kind":"skill","title":"flat","tagline":"Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Flat Design System Skill (Antigravity)\n\n## Mission\n\nYou are an expert design-system guideline author for Flat.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\na minimalist style characterized by two-dimensional elements, vibrant colors, and clean typography, focusing on functionality over ornamentation. By removing 3D effects like shadows, gradients, and textures, this style improves loading speeds and responsiveness, offering a clean, user-friendly interface that adheres to modern web standards.\n\n## Style Foundations\n\n- Visual style: minimal, enterprise\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Inter, display=Inter, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#F2673C, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\n\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\n\nconcise, confident, helpful, clear, friendly, professional\n\n## Rules: Do\n\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n- design for empty/loading/error states\n- ensure responsive behavior by default\n\n## Rules: Don't\n\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid decorative motion without purpose\n- avoid ambiguous labels\n- avoid mixing multiple visual metaphors\n\n## Expected Behavior\n\n- Follow the foundations first, then component consistency.\n- When uncertain, prioritize accessibility and clarity over novelty.\n- Provide concrete defaults and explain trade-offs when alternatives are possible.\n- Keep guidance opinionated, concise, and implementation-focused.\n\n## Guideline Authoring Workflow\n\n1. Restate the design intent in one sentence before proposing rules.\n2. Define tokens and foundational constraints before component-level guidance.\n3. Specify component anatomy, states, variants, and interaction behavior.\n4. Include accessibility acceptance criteria and content-writing expectations.\n5. Add anti-patterns and migration notes for existing inconsistent UI.\n6. End with a QA checklist that can be executed in code review.\n\n## Required Output Structure\n\nWhen generating design-system guidance, use this structure:\n\n- Context and goals\n- Design tokens and foundations\n- Component-level rules (anatomy, variants, states, responsive behavior)\n- Accessibility requirements and testable acceptance criteria\n- Content and tone standards with examples\n- Anti-patterns and prohibited implementations\n- QA checklist\n\n## Component Rule Expectations\n\n- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).\n- Describe interaction behavior for keyboard, pointer, and touch.\n- State spacing, typography, and color-token usage explicitly.\n- Include responsive behavior and edge cases (long labels, empty states, overflow).\n\n## Quality Gates\n\n- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.\n- Every accessibility statement must be testable in implementation.\n- Prefer system consistency over one-off local optimizations.\n- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.\n\n## Example Constraint Language\n\n- Use \"must\" for non-negotiable rules and \"should\" for recommendations.\n- Pair every do-rule with at least one concrete don't-example.\n- If introducing a new pattern, include migration guidance for existing components.\n\n<!-- TYPEUI_SH_MANAGED_END -->","tags":["flat","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-flat","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-agents","topic-ai-agents","topic-ai-tools","topic-awesome","topic-awesome-list","topic-awesome-readme","topic-claude-design","topic-codex","topic-cursor"],"categories":["awesome-design-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/bergside/awesome-design-skills/flat","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add bergside/awesome-design-skills","source_repo":"https://github.com/bergside/awesome-design-skills","install_from":"skills.sh"}},"qualityScore":"0.589","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 277 github stars · SKILL.md body (3,709 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T12:53:53.572Z","embedding":null,"createdAt":"2026-04-18T22:11:23.602Z","updatedAt":"2026-05-02T12:53:53.572Z","lastSeenAt":"2026-05-02T12:53:53.572Z","tsv":"'1':262 '100':121 '111827':151 '12/14/16/20/24/32':111 '16a34a':143 '2':273 '2.2':157 '200':122 '3':284 '300':123 '3d':14,76 '4':293 '4/8/12/16/24/32':154 '400':124 '5':303 '500':125 '6':315 '600':126 '700':127 '800':128 '8b5cf6':141 '900':129 'aa':158 'accept':296,360 'access':155,234,295,356,441,462,465 'activ':387 'add':304 'adher':98 'adject':429 'aesthet':460 'alon':430 'altern':248 'ambigu':215,428 'anatomi':287,351 'anchor':431 'anti':306,369 'anti-pattern':305,368 'antigrav':26 'author':36,260 'avoid':201,205,209,214,217 'behavior':195,223,292,355,395,412 'brand':54 'case':415 'character':58 'checklist':320,375 'clariti':236 'clean':10,67,92 'clear':171 'code':326 'color':9,65,130,406 'color-token':405 'compon':229,281,286,348,376,504 'component-level':280,347 'concis':168,254 'concret':240,489 'confid':169 'conflict':458 'consist':230,450 'constraint':278,467 'content':300,362 'content-writ':299 'context':340 'contrast':203 'creat':39 'criteria':297,361 'd97706':145 'danger':136,146 'dc2626':147 'decor':210 'default':197,241,382 'defin':274,379 'depend':426 'describ':393 'design':23,33,53,189,265,334,343 'design-system':32,333 'dimension':4,62 'direct':48 'disabl':388 'display':115 'do-rul':482 'edg':414 'effect':15,77 'element':63 'empti':418 'empty/loading/error':191 'end':316 'engin':51 'ensur':193 'enterpris':108 'error':390 'everi':440,481 'exampl':367,439,466,493 'execut':324 'exist':312,503 'expect':222,302,378 'expert':31 'explain':243 'explicit':188,409 'f2673c':139 'fast':17 'ffffff':149 'first':161,227 'flag':457 'flat':1,22,38 'focus':69,164,258,385 'focus-vis':384 'follow':224 'font':112 'foundat':104,226,277,346 'friend':20,95,172 'function':71 'gate':422 'generat':332 'goal':342 'gradient':80 'guidanc':44,252,283,336,501 'guidelin':35,259 'help':170 'hierarchi':184 'hover':383 'implement':42,257,373,447 'implementation-focus':256 'implementation-readi':41 'improv':85 'includ':294,410,499 'inconsist':206,313 'intent':266 'inter':114,116 'interact':162,186,291,394 'interfac':21,96 'introduc':495 'jetbrain':118 'keep':185,251 'keyboard':160,397 'keyboard-first':159 'label':216,417 'languag':468 'least':487 'level':282,349 'like':78 'load':86,389 'local':455 'long':416 'low':202 'metaphor':221 'migrat':309,500 'minim':107 'minimalist':5,56 'mission':27 'mix':218 'modern':100 'mono':117,119 'motion':211 'multipl':219 'must':443,470 'negoti':474 'neutral':133 'new':497 'non':473 'non-negoti':472 'note':310 'novelti':238 'off':246 'offer':90 'one':268,453,488 'one-off':452 'opinion':253 'optim':456 'ornament':73 'output':329 'overflow':420 'pair':480 'palett':131 'pattern':307,370,498 'pointer':398 'possibl':250 'practic':40 'prefer':176,448 'preserv':182 'primari':113,132,138 'priorit':233,464 'profession':173 'prohibit':372 'propos':271 'provid':239 'purpos':213 'qa':319,374 'qualiti':421 'raw':180 'readi':43 'recommend':479 'relev':392 'remov':75 'requir':328,357,380 'respons':89,194,354,411 'restat':263 'review':327 'rhythm':208 'rule':174,198,272,350,377,424,433,475,484 'scale':110,153 'secondari':140 'semant':177 'sentenc':269 'shadow':79 'skill':25 'skill-flat' 'source-bergside' 'space':152,207,402 'specifi':285 'speed':87 'standard':102,365 'state':165,187,192,288,353,381,401,419 'statement':442 'structur':330,339 'style':6,57,84,103,106 'success':134,142 'surfac':148 'system':24,34,335,449 't-exampl':491 'testabl':359,445 'text':150,204 'textur':82 'threshold':437 'token':137,178,275,344,407,436 'tone':167,364 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-agents' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome' 'topic-awesome-list' 'topic-awesome-readme' 'topic-claude-design' 'topic-codex' 'topic-cursor' 'touch':400 'trade':245 'trade-off':244 'two':3,61 'two-dimension':2,60 'typographi':11,68,109,403 'ui':314 'uncertain':232 'usag':408 'use':49,337,469 'user':19,94 'user-friend':18,93 'valu':181 'variant':289,352 'vibrant':8,64 'visibl':163,386 'visual':105,183,220 'warn':135,144 'wcag':156 'web':101 'weight':120 'without':212 'workflow':261 'write':166,301","prices":[{"id":"6da04570-0990-4a31-ab2f-4939b61a9364","listingId":"37cc54d0-51fc-4bbf-b4ca-5bbbfbe04420","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"bergside","category":"awesome-design-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:11:23.602Z"}],"sources":[{"listingId":"37cc54d0-51fc-4bbf-b4ca-5bbbfbe04420","source":"github","sourceId":"bergside/awesome-design-skills/flat","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/flat","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:23.602Z","lastSeenAt":"2026-05-02T12:53:53.572Z"}],"details":{"listingId":"37cc54d0-51fc-4bbf-b4ca-5bbbfbe04420","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"flat","github":{"repo":"bergside/awesome-design-skills","stars":277,"topics":["agent-skills","agentic-ai","agentic-workflow","agents","ai","ai-agents","ai-tools","awesome","awesome-list","awesome-readme","claude-design","codex","cursor","design","design-md","design-system","google-stitch","skills"],"license":"mit","html_url":"https://github.com/bergside/awesome-design-skills","pushed_at":"2026-05-01T09:16:36Z","description":"List of awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools","skill_md_sha":"cd2651bfef5b18c06657398ceeb5f161c0b4d1ef","skill_md_path":"skills/flat/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/flat"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"flat","license":"MIT","description":"Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/flat"},"updatedAt":"2026-05-02T12:53:53.572Z"}}