{"id":"554a4a25-fe26-4baa-9fe2-72b3584155e5","shortId":"dCuj7d","kind":"skill","title":"clean","tagline":"Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Clean Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Clean.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nClean design style focuses on simplicity, minimalism, and high usability, using ample whitespace, legible typography, and limited color palettes to reduce visual clutter\n\n## Style Foundations\n- Visual style: minimal, clean\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Roboto, display=Poppins, mono=Inconsolata | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 8pt baseline grid\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets\n\n## Writing Tone\nclear, friendly\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- keep interaction states explicit\n- design for empty/loading/error states\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid decorative motion without purpose\n- avoid ambiguous labels\n\n## Expected Behavior\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\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\nWhen generating design-system guidance, use this structure:\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- 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- 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- 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":["clean","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-clean","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/clean","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,468 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:52.342Z","embedding":null,"createdAt":"2026-04-18T22:11:11.561Z","updatedAt":"2026-05-02T12:53:52.342Z","lastSeenAt":"2026-05-02T12:53:52.342Z","tsv":"'1':235 '100':93 '111827':123 '12/14/16/20/24/32':84 '16a34a':115 '2':246 '2.2':131 '200':94 '3':257 '300':95 '3b82f6':111 '4':266 '400':96 '44px':153 '5':276 '500':97 '6':288 '600':98 '700':99 '800':100 '8b5cf6':113 '8pt':126 '900':101 'aa':132 'accept':269,333 'access':129,207,268,329,414,435,438 'activ':360 'add':277 'adject':402 'aesthet':433 'alon':403 'altern':221 'ambigu':193,401 'ampl':7,64 'anatomi':260,324 'anchor':404 'anti':279,342 'anti-pattern':278,341 'aria':143 'author':34,233 'avoid':179,183,187,192 'baselin':127 'behavior':196,265,328,368,385 'brand':52 'case':388 'checklist':293,348 'clariti':209 'clean':1,20,36,53,81 'clear':158 'clutter':19,75 'code':299 'color':14,70,102,379 'color-token':378 'compon':202,254,259,321,349,477 'component-level':253,320 'concis':227 'concret':213,462 'conflict':431 'consist':203,423 'constraint':251,440 'content':273,335 'content-writ':272 'context':313 'contrast':181 'creat':37 'criteria':270,334 'd97706':117 'danger':108,118 'dc2626':119 'decor':188 'default':214,355 'defin':247,352 'depend':399 'describ':366 'design':5,21,31,51,54,172,238,307,316 'design-system':30,306 'direct':46 'disabl':361 'display':88 'do-rul':455 'edg':387 'empti':391 'empty/loading/error':174 'end':289 'engin':49 'error':363 'everi':413,454 'exampl':340,412,439,466 'execut':297 'exist':285,476 'expect':195,275,351 'expert':29 'explain':216 'explicit':171,382 'ffffff':121 'first':135,200 'flag':430 'focus':4,56,138,231,358 'focus-vis':357 'follow':197 'font':85 'foundat':77,199,250,319 'friend':159 'gate':395 'generat':305 'goal':315 'grid':128 'guidanc':42,225,256,309,474 'guidelin':33,232 'high':61 'hover':356 'html':141 'implement':40,230,346,420 'implementation-focus':229 'implementation-readi':39 'includ':267,383,472 'inconsist':184,286 'inconsolata':91 'intent':239 'interact':136,169,264,367 'introduc':468 'keep':168,224 'keyboard':134,370 'keyboard-first':133 'label':148,194,390 'languag':441 'least':460 'legibl':9,66 'level':255,322 'limit':13,69 'load':362 'local':428 'long':389 'low':180 'migrat':282,473 'minim':59,80 'mission':25 'mono':90 'motion':151,189 'must':416,443 'negoti':447 'neutral':105 'new':470 'non':446 'non-negoti':445 'note':283 'novelti':211 'off':219 'one':241,426,461 'one-off':425 'opinion':226 'optim':429 'output':302 'overflow':393 'pair':453 'palett':15,71,103 'pattern':280,343,471 'pointer':371 'poppin':89 'possibl':223 'practic':38 'prefer':162,421 'primari':86,104,110 'priorit':206,437 'prohibit':345 'propos':244 'provid':212 'purpos':191 'qa':292,347 'qualiti':394 'raw':166 'reader':146 'readi':41 'recommend':452 'reduc':17,73,150 'reduced-mot':149 'relev':365 'requir':301,330,353 'respons':327,384 'restat':236 'review':300 'rhythm':186 'roboto':87 'rule':160,176,245,323,350,397,406,448,457 'scale':83,125 'screen':145 'screen-read':144 'secondari':112 'semant':140,163 'sentenc':242 'simplic':3,58 'simplicity-focus':2 'skill':23 'skill-clean' 'source-bergside' 'space':124,185,375 'specifi':258 'standard':338 'state':139,170,175,261,326,354,374,392 'statement':415 'structur':303,312 'style':55,76,79 'success':106,114 'support':152 'surfac':120 'system':22,32,308,422 't-exampl':464 'target':155 'test':147 'testabl':332,418 'text':122,182 'threshold':410 'token':109,164,248,317,380,409 'tone':157,337 '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':154,373 'trade':218 'trade-off':217 'typographi':10,67,82,376 'ui':287 'uncertain':205 'univers':24 'usabl':62 'usag':381 'use':47,63,310,442 'valu':167 'variant':262,325 'visibl':137,359 'visual':18,74,78 'warn':107,116 'wcag':130 'weight':92 'whitespac':8,65 'without':190 'workflow':234 'write':156,274","prices":[{"id":"1934e4ea-5230-4c08-9d77-768f2dc22516","listingId":"554a4a25-fe26-4baa-9fe2-72b3584155e5","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:11.561Z"}],"sources":[{"listingId":"554a4a25-fe26-4baa-9fe2-72b3584155e5","source":"github","sourceId":"bergside/awesome-design-skills/clean","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/clean","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:11.561Z","lastSeenAt":"2026-05-02T12:53:52.342Z"}],"details":{"listingId":"554a4a25-fe26-4baa-9fe2-72b3584155e5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"clean","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":"a963505a597e254551c911665250e00afb8a3b39","skill_md_path":"skills/clean/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/clean"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"clean","license":"MIT","description":"Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/clean"},"updatedAt":"2026-05-02T12:53:52.342Z"}}