{"id":"8007c664-51a9-4b78-83f4-6245218fd968","shortId":"PsSyCX","kind":"skill","title":"glassmorphism","tagline":"Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Glassmorphism Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Glassmorphism.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nprovide fast, reliable communication for individuals, teams, and communities while maintaining a clean interface and high performance across desktop environments.\n\n## Style Foundations\n- Visual style: clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism\n- Typography scale: mobile-first compact scale | Fonts: primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger, info, surface/subtle layers | Tokens: primary=#1856FF, secondary=#3A344E, success=#07CA6B, warning=#E89558, danger=#EA2143, surface=#FFFFFF, text=#141414\n- Spacing scale: comfortable density mode\n\n- bento cards\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful, clear, friendly, professional\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\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\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":["glassmorphism","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-glassmorphism","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/glassmorphism","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,590 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:53.806Z","embedding":null,"createdAt":"2026-04-18T22:11:25.902Z","updatedAt":"2026-05-02T12:53:53.806Z","lastSeenAt":"2026-05-02T12:53:53.806Z","tsv":"'07ca6b':129 '1':243 '100':104 '141414':137 '1856ff':125 '2':254 '2.2':147 '200':105 '3':265 '300':106 '3a344e':127 '4':274 '400':107 '5':284 '500':108 '6':296 '600':109 '700':110 '800':111 '900':112 'aa':148 'accept':277,341 'access':145,215,276,337,422,443,446 'across':68 'activ':368 'add':285 'adject':410 'aesthet':441 'alon':411 'altern':229 'ambigu':196,409 'anatomi':268,332 'anchor':412 'anti':287,350 'anti-pattern':286,349 'author':32,241 'avoid':182,186,190,195,198 'behavior':204,273,336,376,393 'bento':143 'blur':9 'bold':79 'border':12 'brand':50 'card':144 'case':396 'checklist':301,356 'clariti':217 'clean':63,75 'clear':161 'code':307 'color':113,387 'color-token':386 'comfort':140 'communic':54 'communiti':59 'compact':89 'compon':210,262,267,329,357,485 'component-level':261,328 'concis':158,235 'concret':221,470 'confid':159 'conflict':439 'consist':211,431 'constraint':259,448 'content':281,343 'content-writ':280 'context':321 'contrast':78,184 'creat':35 'criteria':278,342 'danger':119,132 'decor':191 'default':222,363 'defin':255,360 'densiti':141 'depend':407 'depth':14 'describ':374 'design':19,29,49,246,315,324 'design-system':28,314 'desktop':69 'direct':44 'disabl':369 'display':96 'do-rul':463 'e89558':131 'ea2143':133 'edg':395 'effect':4,82 'eleg':17 'empti':399 'end':297 'engin':47 'enterpris':80 'environ':70 'error':371 'everi':421,462 'exampl':348,420,447,474 'execut':305 'exist':293,484 'expect':203,283,359 'expert':27 'explain':224 'explicit':178,390 'fast':52 'ffffff':135 'first':88,151,208 'flag':438 'focus':154,239,366 'focus-vis':365 'follow':205 'font':91 'foundat':72,207,258,327 'friend':162 'frost':2 'gate':403 'generat':313 'glass':3 'glassmorph':1,18,34,83 'goal':323 'guidanc':40,233,264,317,482 'guidelin':31,240 'help':160 'hierarchi':174 'high':66,77 'high-contrast':76 'hover':364 'implement':38,238,354,428 'implementation-focus':237 'implementation-readi':37 'includ':275,391,480 'inconsist':187,294 'individu':56 'info':120 'intent':247 'interact':152,176,272,375 'interfac':64 'introduc':476 'jakarta':94,98 'jetbrain':101 'keep':175,232 'keyboard':150,378 'keyboard-first':149 'label':197,398 'languag':449 'layer':7,122 'least':468 'level':263,330 'liquidglass':81 'load':370 'local':436 'long':397 'low':183 'lumin':11 'maintain':61 'metaphor':202 'migrat':290,481 'mission':23 'mix':199 'mobil':87 'mobile-first':86 'mode':142 'modern':16 'mono':100,102 'motion':192 'multipl':200 'must':424,451 'negoti':455 'neutral':116 'new':478 'non':454 'non-negoti':453 'note':291 'novelti':219 'off':227 'one':249,434,469 'one-off':433 'opinion':234 'optim':437 'output':310 'overflow':401 'pair':461 'palett':114 'pattern':288,351,479 'perform':67 'plus':93,97 'pointer':379 'possibl':231 'practic':36 'prefer':166,429 'preserv':172 'primari':92,115,124 'priorit':214,445 'profession':163 'prohibit':353 'propos':252 'provid':51,220 'purpos':194 'qa':300,355 'qualiti':402 'raw':170 'readi':39 'recommend':460 'relev':373 'reliabl':53 'requir':309,338,361 'respons':335,392 'restat':244 'review':308 'rhythm':189 'rule':164,179,253,331,358,405,414,456,465 'san':95,99 'scale':85,90,139 'secondari':126 'semant':167 'sentenc':250 'skill':21 'skill-glassmorphism' 'source-bergside' 'space':138,188,383 'specifi':266 'standard':346 'state':155,177,269,334,362,382,400 'statement':423 'structur':311,320 'style':71,74 'subtl':8 'success':117,128 'surfac':134 'surface/subtle':121 'system':20,30,316,430 't-exampl':472 'team':57 'testabl':340,426 'text':136,185 'threshold':418 'token':123,168,256,325,388,417 'tone':157,345 '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':381 'trade':226 'trade-off':225 'transluc':6 'typographi':84,384 'ui':295 'uncertain':213 'univers':22 'usag':389 'use':45,318,450 'valu':171 'variant':270,333 'visibl':153,367 'visual':73,173,201 'warn':118,130 'wcag':146 'weight':103 'without':193 'workflow':242 'write':156,282","prices":[{"id":"2ec4d3b0-ee32-4d03-b6b8-41ee2d2cf9b3","listingId":"8007c664-51a9-4b78-83f4-6245218fd968","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:25.902Z"}],"sources":[{"listingId":"8007c664-51a9-4b78-83f4-6245218fd968","source":"github","sourceId":"bergside/awesome-design-skills/glassmorphism","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/glassmorphism","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:25.902Z","lastSeenAt":"2026-05-02T12:53:53.806Z"}],"details":{"listingId":"8007c664-51a9-4b78-83f4-6245218fd968","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"glassmorphism","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":"d15365b1abbc28fac595a56aa26ffb09c48076cc","skill_md_path":"skills/glassmorphism/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/glassmorphism"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"glassmorphism","license":"MIT","description":"Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/glassmorphism"},"updatedAt":"2026-05-02T12:53:53.806Z"}}