{"id":"c1944841-4e6e-486d-81f4-e001fc01047f","shortId":"Kvkjv6","kind":"skill","title":"matrix","tagline":"A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Matrix Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Matrix.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements, monospaced typography, and a single deep monochromatic surface. The aesthetic borrows from order-book exchanges and terminal interfaces: ultra-dense layouts, mono numerics, hairline borders, near-square 2px corners, a single brand-green accent that drives every interaction, and a flat dark surface across every section.\n\n## Style Foundations\n- Visual style: high-contrast\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Space Mono, display=Space Mono, mono=Space Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#2DB58A, secondary=#0B0C14, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\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\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\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":["matrix","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-matrix","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/matrix","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.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 826 github stars · SKILL.md body (3,647 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-18T18:53:22.769Z","embedding":null,"createdAt":"2026-05-06T12:54:22.710Z","updatedAt":"2026-05-18T18:53:22.769Z","lastSeenAt":"2026-05-18T18:53:22.769Z","tsv":"'0b0c14':166 '1':271 '100':146 '111827':176 '12/14/16/20/24/32':134 '16a34a':168 '2':282 '2.2':182 '200':147 '2db58a':164 '2px':105 '3':293 '300':148 '4':302 '4/8/12/16/24/32':179 '400':149 '5':312 '500':150 '6':324 '600':151 '700':152 '800':153 '900':154 'aa':183 'accent':112 'accept':305,369 'access':180,243,304,365,450,471,474 'across':122 'activ':396 'add':313 'adject':438 'aesthet':84,469 'alon':439 'altern':257 'ambigu':229,437 'anatomi':296,360 'anchor':440 'anti':315,378 'anti-pattern':314,377 'author':36,269 'avoid':220,224,228 'behavior':232,301,364,404,421 'book':89 'border':101 'borrow':85 'brand':54,110 'brand-green':109 'case':424 'checklist':329,384 'clariti':245 'clear':196 'code':335 'color':155,415 'color-token':414 'compon':238,290,295,357,385,513 'component-level':289,356 'concis':193,263 'concret':249,498 'confid':194 'conflict':467 'consist':239,459 'constraint':287,476 'content':309,371 'content-writ':308 'context':349 'contrast':131,222 'corner':106 'creat':39 'criteria':306,370 'cyber':4,57 'cyber-slick':3,56 'd97706':170 'danger':161,171 'dark':7,60,120 'dark-on':6,59 'dc2626':172 'deep':80 'default':250,391 'defin':13,66,283,388 'dens':96 'depend':435 'describ':402 'design':23,33,53,213,274,343,352 'design-system':32,342 'digit':20,73 'direct':48 'disabl':397 'display':139 'do-rul':491 'drive':114 'edg':423 'element':21,74 'empti':427 'empty/loading/error':215 'end':325 'engin':51 'error':399 'everi':115,123,449,490 'exampl':376,448,475,502 'exchang':90 'execut':333 'exist':321,512 'expect':231,311,387 'expert':31 'explain':252 'explicit':212,418 'fashion':16,69 'ffffff':174 'first':186,236 'flag':466 'flat':119 'focus':189,267,394 'focus-vis':393 'follow':233 'font':135 'foundat':126,235,286,355 'friend':197 'gate':431 'generat':341 'goal':351 'green':111 'guidanc':44,261,292,345,510 'guidelin':35,268 'hairlin':100 'help':195 'hierarchi':208 'high':18,71,130 'high-contrast':129 'high-tech':17,70 'hover':392 'implement':42,266,382,456 'implementation-focus':265 'implementation-readi':41 'includ':303,419,508 'inconsist':225,322 'inspir':11,64 'intent':275 'interact':116,187,210,300,403 'interfac':12,65,93 'introduc':504 'keep':209,260 'keyboard':185,406 'keyboard-first':184 'label':230,426 'languag':477 'layout':97 'least':496 'level':291,358 'load':398 'local':464 'long':425 'low':221 'matrix':1,10,22,38,63 'matrix-inspir':9,62 'migrat':318,509 'minimalist':15,68 'mission':27 'mono':98,138,141,142,144 'monochromat':81 'monospac':75 'must':452,479 'near':103 'near-squar':102 'negoti':483 'neutral':158 'new':506 'non':482 'non-negoti':481 'note':319 'novelti':247 'numer':99 'off':255 'one':277,462,497 'one-off':461 'opinion':262 'optim':465 'order':88 'order-book':87 'output':338 'overflow':429 'pair':489 'palett':156 'pattern':316,379,507 'pointer':407 'possibl':259 'practic':40 'prefer':200,457 'preserv':206 'primari':136,157,163 'priorit':242,473 'prohibit':381 'propos':280 'provid':248 'qa':328,383 'qualiti':430 'raw':204 'readi':43 'recommend':488 'relev':401 'requir':337,366,389 'respons':363,420 'restat':272 'review':336 'rhythm':227 'rule':198,217,281,359,386,433,442,484,493 'scale':133,178 'secondari':165 'section':124 'semant':201 'sentenc':278 'singl':79,108 'skill':25 'skill-matrix' 'slick':5,58 'source-bergside' 'space':137,140,143,177,226,411 'specifi':294 'squar':104 'standard':374 'state':190,211,216,297,362,390,410,428 'statement':451 'structur':339,348 'style':125,128 'success':159,167 'surfac':82,121,173 'system':24,34,344,458 't-exampl':500 'tech':19,72 'termin':92 'testabl':368,454 'text':175,223 'threshold':446 'token':162,202,284,353,416,445 'tone':192,373 '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':409 'trade':254 'trade-off':253 'typographi':76,132,412 'ui':323 'ultra':95 'ultra-dens':94 'uncertain':241 'univers':26 'usag':417 'use':49,346,478 'valu':205 'variant':298,361 'visibl':188,395 'visual':127,207 'warn':160,169 'wcag':181 'weight':145 'workflow':270 'write':191,310","prices":[{"id":"4e818933-dabc-4f09-a7ee-49cdcf8b24d3","listingId":"c1944841-4e6e-486d-81f4-e001fc01047f","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-05-06T12:54:22.710Z"}],"sources":[{"listingId":"c1944841-4e6e-486d-81f4-e001fc01047f","source":"github","sourceId":"bergside/awesome-design-skills/matrix","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/matrix","isPrimary":false,"firstSeenAt":"2026-05-06T12:54:22.710Z","lastSeenAt":"2026-05-18T18:53:22.769Z"}],"details":{"listingId":"c1944841-4e6e-486d-81f4-e001fc01047f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"matrix","github":{"repo":"bergside/awesome-design-skills","stars":826,"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-06T18:26:50Z","description":"List of 67 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":"f24302523d8ca87409fa6ab8325ad2cf2c2f727b","skill_md_path":"skills/matrix/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/matrix"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"matrix","description":"A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements"},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/matrix"},"updatedAt":"2026-05-18T18:53:22.769Z"}}