{"id":"fbcb193d-51a2-4264-9071-0172055a0a53","shortId":"8qZzQv","kind":"skill","title":"dithered","tagline":"Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# dithered Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for dithered.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nDithered Is a technique that uses patterns of dots to simulate shades and colors with a limited palette within modern digital interfaces to create nostalgic, retro, or high-contrast, artistic visual styles\n\n## Style Foundations\n- Visual style: modern, minimal\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Open Sans, display=Space Grotesk, mono=IBM Plex Mono | 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: 4/8/12/16/24/32\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\n\n## Rules: Do\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- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid decorative motion without purpose\n- avoid ambiguous labels\n- avoid inaccessible hit areas\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":["dithered","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-dithered","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/dithered","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,530 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.875Z","embedding":null,"createdAt":"2026-04-18T22:11:16.812Z","updatedAt":"2026-05-02T12:53:52.875Z","lastSeenAt":"2026-05-02T12:53:52.875Z","tsv":"'1':245 '100':108 '111827':138 '14/16/18/24/32/40':95 '16a34a':130 '2':256 '2.2':144 '200':109 '3':267 '300':110 '3b82f6':126 '4':276 '4/8/12/16/24/32':141 '400':111 '5':286 '500':112 '6':298 '600':113 '700':114 '800':115 '8b5cf6':128 '900':116 'aa':145 'accept':279,343 'access':142,217,278,339,424,445,448 'activ':370 'add':287 'adject':412 'aesthet':443 'alon':413 'altern':231 'ambigu':199,411 'anatomi':270,334 'anchor':414 'anti':289,352 'anti-pattern':288,351 'area':204 'artist':84 'author':35,243 'avoid':185,189,193,198,201 'behavior':179,206,275,338,378,395 'brand':53 'case':398 'checklist':303,358 'clariti':219 'code':309 'color':67,117,389 'color-token':388 'compon':212,264,269,331,359,487 'component-level':263,330 'concis':155,237 'concret':223,472 'confid':156 'conflict':441 'consist':213,433 'constraint':261,450 'content':283,345 'content-writ':282 'context':323 'contrast':19,83,187 'creat':38,77 'criteria':280,344 'd97706':132 'danger':123,133 'dc2626':134 'decor':194 'default':181,224,365 'defin':257,362 'depend':409 'describ':376 'design':22,32,52,173,248,317,326 'design-system':31,316 'digit':74 'direct':47 'disabl':371 'display':100 'dither':1,21,37,54 'do-rul':465 'dot':3,62 'dot-pattern':2 'edg':397 'empti':401 'empty/loading/error':175 'end':299 'engin':50 'ensur':177 'error':373 'everi':423,464 'exampl':350,422,449,476 'execut':307 'exist':295,486 'expect':205,285,361 'expert':30 'explain':226 'explicit':172,392 'ffffff':136 'first':148,210 'flag':440 'focus':151,241,368 'focus-vis':367 'follow':207 'font':96 'foundat':88,209,260,329 'gate':405 'generat':315 'goal':325 'grotesk':102 'guidanc':43,235,266,319,484 'guidelin':34,242 'help':157 'hierarchi':168 'high':18,82 'high-contrast':17,81 'hit':203 'hover':366 'ibm':104 'implement':41,240,356,430 'implementation-focus':239 'implementation-readi':40 'inaccess':202 'includ':277,393,482 'inconsist':190,296 'intent':249 'interact':149,170,274,377 'interfac':75 'introduc':478 'keep':169,234 'keyboard':147,380 'keyboard-first':146 'label':200,400 'languag':451 'least':470 'level':265,332 'limit':12,70 'load':372 'local':438 'long':399 'low':186 'migrat':292,483 'minim':92 'mission':26 'modern':73,91 'mono':103,106 'motion':195 'must':426,453 'negoti':457 'neutral':120 'new':480 'non':456 'non-negoti':455 'nostalg':15,78 'note':293 'novelti':221 'off':229 'one':251,436,471 'one-off':435 'open':98 'opinion':236 'optim':439 'output':312 'overflow':403 'pair':463 'palett':13,71,118 'pattern':4,60,290,353,481 'plex':105 'pointer':381 'possibl':233 'practic':39 'prefer':160,431 'preserv':166 'primari':97,119,125 'priorit':216,447 'prohibit':355 'propos':254 'provid':222 'purpos':197 'qa':302,357 'qualiti':404 'raw':164 'readi':42 'recommend':462 'relev':375 'render':5 'requir':311,340,363 'respons':178,337,394 'restat':246 'retro':16,79 'review':310 'rhythm':192 'rule':158,182,255,333,360,407,416,458,467 'san':99 'scale':94,140 'secondari':127 'semant':161 'sentenc':252 'shade':9,65 'simul':8,64 'skill':24 'skill-dithered' 'source-bergside' 'space':101,139,191,385 'specifi':268 'standard':348 'state':152,171,176,271,336,364,384,402 'statement':425 'structur':313,322 'style':86,87,90 'success':121,129 'surfac':135 'system':23,33,318,432 't-exampl':474 'techniqu':6,57 'testabl':342,428 'text':137,188 'threshold':420 'token':124,162,258,327,390,419 'tone':154,347 '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':383 'trade':228 'trade-off':227 'typographi':93,386 'ui':297 'uncertain':215 'univers':25 'usag':391 'use':48,59,320,452 'valu':165 'variant':272,335 'visibl':150,369 'visual':20,85,89,167 'warn':122,131 'wcag':143 'weight':107 'within':72 'without':196 'workflow':244 'write':153,284","prices":[{"id":"663b09ba-190b-47bb-a754-95e5f505ceea","listingId":"fbcb193d-51a2-4264-9071-0172055a0a53","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:16.812Z"}],"sources":[{"listingId":"fbcb193d-51a2-4264-9071-0172055a0a53","source":"github","sourceId":"bergside/awesome-design-skills/dithered","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dithered","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:16.812Z","lastSeenAt":"2026-05-02T12:53:52.875Z"}],"details":{"listingId":"fbcb193d-51a2-4264-9071-0172055a0a53","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"dithered","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":"d68f4ed3903fffbeb400f475fdd424ae30b53796","skill_md_path":"skills/dithered/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dithered"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"dithered","license":"MIT","description":"Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/dithered"},"updatedAt":"2026-05-02T12:53:52.875Z"}}