{"id":"6d53a247-4429-435a-84c6-a33e648de3fc","shortId":"gYtnsZ","kind":"skill","title":"material","tagline":"Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Material Design System Skill (Antigravity)\n\n## Mission\n\nYou are an expert design-system guideline author for Material.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\nUX (user experience) designers use it to create visually consistent, intuitive, and responsive digital experiences. With built-in motion, layering, and dynamic theming, Material Design helps teams deliver accessible, high-quality UIs (user interfaces) across devices and platforms.\n\n## Style Foundations\n\n- Visual style: modern, minimal, clean\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Inter, display=Roboto, mono=Fira Code | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#6442D6, secondary=#C8B3FD, 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\n\n## Rules: Do\n\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\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":["material","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-material","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/material","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,472 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.163Z","embedding":null,"createdAt":"2026-04-18T22:11:29.634Z","updatedAt":"2026-05-02T12:53:54.163Z","lastSeenAt":"2026-05-02T12:53:54.163Z","tsv":"'1':233 '100':113 '111827':144 '12/14/16/20/24/32':103 '16a34a':136 '2':244 '2.2':150 '200':114 '3':255 '300':115 '4':264 '4/8/12/16/24/32':147 '400':116 '5':274 '500':117 '6':286 '600':118 '6442d6':132 '700':119 '800':120 '900':121 'aa':151 'accept':267,331 'access':83,148,205,266,327,412,433,436 'across':90 'activ':358 'add':275 'adject':400 'aesthet':431 'alon':401 'altern':219 'ambigu':191,399 'anatomi':258,322 'anchor':402 'anti':277,340 'anti-pattern':276,339 'antigrav':25 'author':35,231 'avoid':182,186,190 'behavior':194,263,326,366,383 'brand':53 'built':12,71 'built-in':11,70 'c8b3fd':134 'case':386 'checklist':291,346 'clariti':207 'clean':100 'code':111,297 'color':122,377 'color-token':376 'compon':200,252,257,319,347,475 'component-level':251,318 'concis':161,225 'concret':211,460 'confid':162 'conflict':429 'consist':63,201,421 'constraint':249,438 'content':271,333 'content-writ':270 'context':311 'contrast':184 'creat':38,61 'criteria':268,332 'cross':18 'cross-platform':17 'd97706':138 'danger':129,139 'dc2626':140 'default':212,353 'defin':245,350 'deliv':82 'depend':397 'describ':364 'design':5,22,32,52,57,79,236,305,314 'design-system':31,304 'devic':91 'digit':67 'direct':47 'disabl':359 'display':107 'do-rul':453 'dynam':9,76 'edg':385 'empti':389 'end':287 'engin':50 'error':361 'everi':411,452 'exampl':338,410,437,464 'execut':295 'exist':283,474 'expect':193,273,349 'experi':56,68 'expert':30 'explain':214 'explicit':178,380 'ffffff':142 'fira':110 'first':154,198 'flag':428 'focus':157,229,356 'focus-vis':355 'follow':195 'font':104 'foundat':95,197,248,317 'gate':393 'generat':303 'goal':313 'googl':2 'guidanc':43,223,254,307,472 'guidelin':34,230 'help':80,163 'hierarchi':174 'high':85 'high-qual':84 'hover':354 'implement':41,228,344,418 'implementation-focus':227 'implementation-readi':40 'includ':265,381,470 'inconsist':187,284 'intent':237 'inter':106 'interact':155,176,262,365 'interfac':89 'introduc':466 'intuit':64 'keep':175,222 'keyboard':153,368 'keyboard-first':152 'label':192,388 'languag':439 'layer':7,74 'least':458 'level':253,320 'load':360 'local':426 'long':387 'low':183 'materi':1,4,21,37,78 'migrat':280,471 'minim':99 'mission':26 'modern':98 'mono':109 'motion':14,73 'must':414,441 'negoti':445 'neutral':126 'new':468 'non':444 'non-negoti':443 'note':281 'novelti':209 'off':217 'one':239,424,459 'one-off':423 'opinion':224 'optim':427 'output':300 'overflow':391 'pair':451 'palett':123 'pattern':20,278,341,469 'platform':19,93 'pointer':369 'possibl':221 'practic':39 'prefer':166,419 'preserv':172 'primari':105,124,131 'priorit':204,435 'prohibit':343 'propos':242 'provid':210 'qa':290,345 'qualiti':86,392 'raw':170 'readi':42 'recommend':450 'relev':363 'requir':299,328,351 'respons':16,66,325,382 'restat':234 'review':298 'rhythm':189 'roboto':108 'rule':164,179,243,321,348,395,404,446,455 'scale':102,146 'secondari':125,133 'semant':167 'sentenc':240 'skill':24 'skill-material' 'source-bergside' 'space':145,188,373 'specifi':256 'standard':336 'state':158,177,259,324,352,372,390 'statement':413 'structur':301,310 'style':94,97 'success':127,135 'surfac':8,141 'system':23,33,306,420 't-exampl':462 'team':81 'testabl':330,416 'text':143,185 'theme':10,77 'threshold':408 'token':130,168,246,315,378,407 'tone':160,335 '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':371 'trade':216 'trade-off':215 'typographi':101,374 'ui':87,285 'uncertain':203 'usag':379 'use':48,58,308,440 'user':55,88 'ux':54 'valu':171 'variant':260,323 'visibl':156,357 'visual':62,96,173 'warn':128,137 'wcag':149 'weight':112 'workflow':232 'write':159,272","prices":[{"id":"99054ccf-0647-4465-8f3e-dc8f98f7ad1e","listingId":"6d53a247-4429-435a-84c6-a33e648de3fc","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:29.634Z"}],"sources":[{"listingId":"6d53a247-4429-435a-84c6-a33e648de3fc","source":"github","sourceId":"bergside/awesome-design-skills/material","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/material","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:29.634Z","lastSeenAt":"2026-05-02T12:53:54.163Z"}],"details":{"listingId":"6d53a247-4429-435a-84c6-a33e648de3fc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"material","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":"6b88511c7cab72b337b496b7de527fb27ffcb894","skill_md_path":"skills/material/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/material"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"material","license":"MIT","description":"Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/material"},"updatedAt":"2026-05-02T12:53:54.163Z"}}