{"id":"1fb8de7e-a5ac-418b-b722-aa7d6e152a36","shortId":"SVm2CW","kind":"skill","title":"mono","tagline":"Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# mono design Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for mono design.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nJoin the private club where people are building, monetizing, and marketing products with AI.\n\n## Style Foundations\n- Visual style: minimal, clean, high-contrast, playful, matrix\n- Typography scale: desktop-first expressive scale | Fonts: primary=Space Mono, display=Space Mono, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, success, warning, danger, info | Tokens: primary=#37F712, secondary=#00A6F4, success=#00A63D, warning=#FE9900, danger=#FF2157, surface=#E7E5E4, text=#78716B\n- Spacing scale: compact density mode\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels\n\n## Writing Tone\nconcise, confident, helpful, clear, friendly\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 mixing multiple visual metaphors\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":["mono","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-mono","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/mono","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,593 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:54.377Z","embedding":null,"createdAt":"2026-04-18T22:11:31.880Z","updatedAt":"2026-05-02T12:53:54.377Z","lastSeenAt":"2026-05-02T12:53:54.377Z","tsv":"'00a63d':123 '00a6f4':121 '1':256 '100':100 '2':267 '2.2':139 '200':101 '3':278 '300':102 '37f712':119 '4':287 '400':103 '5':297 '500':104 '6':309 '600':105 '700':106 '78716b':131 '800':107 '900':108 'aa':140 'accept':290,354 'access':137,228,289,350,435,456,459 'activ':381 'add':298 'adject':423 'aesthet':21,454 'ai':70 'alon':424 'altern':242 'ambigu':205,422 'anatomi':281,345 'anchor':425 'anti':300,363 'anti-pattern':299,362 'area':215 'aria':151 'author':37,254 'avoid':191,195,199,204,207,212 'behavior':185,217,286,349,389,406 'brand':56 'build':64 'case':409 'checklist':314,369 'chic':20 'clariti':230 'clean':76 'clear':162 'club':60 'code':320 'color':109,400 'color-token':399 'compact':14,134 'compon':223,275,280,342,370,498 'component-level':274,341 'concis':159,248 'concret':234,483 'confid':160 'conflict':452 'consist':224,444 'constraint':272,461 'content':294,356 'content-writ':293 'context':334 'contrast':12,79,193 'creat':41 'criteria':291,355 'danger':115,126 'decor':200 'default':187,235,376 'defin':268,373 'densiti':15,135 'depend':420 'describ':387 'design':8,23,24,34,40,55,179,259,328,337 'design-system':33,327 'desktop':85 'desktop-first':84 'direct':50 'disabl':382 'display':93 'do-rul':476 'driven':4 'e7e5e4':129 'edg':408 'element':13 'empti':412 'empty/loading/error':181 'end':310 'engin':53 'ensur':183 'error':384 'everi':434,475 'exampl':361,433,460,487 'execut':318 'exist':306,497 'expect':216,296,372 'expert':32 'explain':237 'explicit':178,403 'express':87 'fe9900':125 'ff2157':127 'first':86,143,221 'flag':451 'focus':146,252,379 'focus-vis':378 'follow':218 'font':89 'foundat':72,220,271,340 'friend':163 'gate':416 'generat':326 'goal':336 'guidanc':46,246,277,330,495 'guidelin':36,253 'hacker':19 'hacker-ch':18 'help':161 'hierarchi':174 'high':11,78 'high-contrast':10,77 'hit':214 'hover':377 'html':149 'implement':44,251,367,441 'implementation-focus':250 'implementation-readi':43 'inaccess':213 'includ':288,404,493 'inconsist':196,307 'info':116 'inspir':7 'intent':260 'interact':144,176,285,388 'introduc':489 'jetbrain':97 'join':57 'keep':175,245 'keyboard':142,391 'keyboard-first':141 'label':156,206,411 'languag':462 'least':481 'level':276,343 'load':383 'local':449 'long':410 'low':192 'market':67 'matrix':6,81 'matrix-inspir':5 'metaphor':211 'migrat':303,494 'minim':75 'mission':28 'mix':208 'mode':136 'monet':65 'mono':1,22,39,92,95,96,98 'monospac':3 'monospace-driven':2 'motion':201 'multipl':209 'must':437,464 'negoti':468 'new':491 'non':467 'non-negoti':466 'note':304 'novelti':232 'off':240 'one':262,447,482 'one-off':446 'opinion':247 'optim':450 'output':323 'overflow':414 'pair':474 'palett':110 'pattern':301,364,492 'peopl':62 'play':80 'pointer':392 'possibl':244 'practic':42 'prefer':166,442 'preserv':172 'primari':90,111,118 'priorit':227,458 'privat':59 'product':68 'prohibit':366 'propos':265 'provid':233 'purpos':203 'qa':313,368 'qualiti':415 'raw':170 'reader':154 'readi':45 'recommend':473 'relev':386 'requir':322,351,374 'respons':184,348,405 'restat':257 'review':321 'rhythm':198 'rule':164,188,266,344,371,418,427,469,478 'scale':83,88,133 'screen':153 'screen-read':152 'secondari':112,120 'semant':148,167 'sentenc':263 'skill':26 'skill-mono' 'source-bergside' 'space':91,94,132,197,396 'specifi':279 'standard':359 'state':147,177,182,282,347,375,395,413 'statement':436 'structur':324,333 'style':71,74 'success':113,122 'surfac':128 'system':25,35,329,443 't-exampl':485 'test':155 'testabl':353,439 'text':130,194 'threshold':431 'token':117,168,269,338,401,430 'tone':158,358 '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':394 'trade':239 'trade-off':238 'typographi':82,397 'ui':308 'uncertain':226 'univers':27 'usag':402 'use':51,331,463 'valu':171 'variant':283,346 'visibl':145,380 'visual':73,173,210 'warn':114,124 'wcag':138 'weight':99 'without':202 'workflow':255 'write':157,295","prices":[{"id":"c5e8b013-910b-474b-ad4f-6429ac64408e","listingId":"1fb8de7e-a5ac-418b-b722-aa7d6e152a36","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:31.880Z"}],"sources":[{"listingId":"1fb8de7e-a5ac-418b-b722-aa7d6e152a36","source":"github","sourceId":"bergside/awesome-design-skills/mono","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/mono","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:31.880Z","lastSeenAt":"2026-05-02T12:53:54.377Z"}],"details":{"listingId":"1fb8de7e-a5ac-418b-b722-aa7d6e152a36","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"mono","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":"adfbbd46701e336b8e735c979fd166e7f761777a","skill_md_path":"skills/mono/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/mono"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"mono","license":"MIT","description":"Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/mono"},"updatedAt":"2026-05-02T12:53:54.377Z"}}