{"id":"3ad5d11f-2983-4b7a-97fe-2017c2ed1adc","shortId":"eQfH9m","kind":"skill","title":"skeumorphism","tagline":"Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Skeumorphism Design System Skill (Antigravity)\n\n## Mission\n\nYou are an expert design-system guideline author for Skeumorphism.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\na UI/UX design approach that mimics real-world textures, materials, and 3D functionality to make digital interfaces intuitive, familiar, and relatable\n\n## Style Foundations\n\n- Visual style: playful\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Roboto, display=Germania One, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#FA3C00, secondary=#F08321, 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":["skeumorphism","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-skeumorphism","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/skeumorphism","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,346 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:55.482Z","embedding":null,"createdAt":"2026-04-18T22:11:42.381Z","updatedAt":"2026-05-02T12:53:55.482Z","lastSeenAt":"2026-05-02T12:53:55.482Z","tsv":"'1':212 '100':92 '111827':123 '12/14/16/20/24/32':81 '16a34a':115 '2':223 '2.2':129 '200':93 '3':234 '300':94 '3d':9,64 '4':243 '4/8/12/16/24/32':126 '400':95 '5':253 '500':96 '6':265 '600':97 '700':98 '800':99 '900':100 'aa':130 'accept':246,310 'access':127,184,245,306,391,412,415 'activ':337 'add':254 'adject':379 'aesthet':410 'alon':380 'altern':198 'ambigu':170,378 'anatomi':237,301 'anchor':381 'anti':256,319 'anti-pattern':255,318 'antigrav':23 'approach':55 'author':33,210 'avoid':161,165,169 'behavior':173,242,305,345,362 'brand':51 'case':365 'checklist':270,325 'clariti':186 'code':276 'color':101,356 'color-token':355 'compon':179,231,236,298,326,454 'component-level':230,297 'concis':140,204 'concret':190,439 'confid':141 'conflict':408 'consist':180,400 'constraint':228,417 'content':250,312 'content-writ':249 'context':290 'contrast':163 'creat':36 'criteria':247,311 'd97706':117 'danger':108,118 'dc2626':119 'default':191,332 'defin':224,329 'depend':376 'describ':343 'design':20,30,50,54,215,284,293 'design-system':29,283 'digit':17,68 'direct':45 'disabl':338 'display':85 'do-rul':432 'edg':364 'effect':10 'empti':368 'end':266 'engin':48 'error':340 'everi':390,431 'exampl':317,389,416,443 'execut':274 'exist':262,453 'expect':172,252,328 'expert':28 'explain':193 'explicit':157,359 'f08321':113 'fa3c00':111 'familiar':12,71 'ffffff':121 'first':133,177 'flag':407 'focus':136,208,335 'focus-vis':334 'follow':174 'font':82 'foundat':75,176,227,296 'function':65 'gate':372 'generat':282 'germania':86 'goal':292 'guidanc':41,202,233,286,451 'guidelin':32,209 'help':142 'hierarchi':153 'hover':333 'implement':39,207,323,397 'implementation-focus':206 'implementation-readi':38 'includ':244,360,449 'inconsist':166,263 'intent':216 'interact':134,155,241,344 'interfac':18,69 'introduc':445 'intuit':16,70 'jetbrain':89 'keep':154,201 'keyboard':132,347 'keyboard-first':131 'label':171,367 'languag':418 'least':437 'level':232,299 'load':339 'local':405 'long':366 'low':162 'make':67 'materi':62 'metaphor':14 'migrat':259,450 'mimic':57 'mimicri':5 'mission':24 'mono':88,90 'must':393,420 'negoti':424 'neutral':105 'new':447 'non':423 'non-negoti':422 'note':260 'novelti':188 'off':196 'one':87,218,403,438 'one-off':402 'opinion':203 'optim':406 'output':279 'overflow':370 'pair':430 'palett':102 'pattern':257,320,448 'physic':13 'play':78 'pointer':348 'possibl':200 'practic':37 'prefer':145,398 'preserv':151 'primari':83,103,110 'priorit':183,414 'prohibit':322 'propos':221 'provid':189 'qa':269,324 'qualiti':371 'raw':149 'readi':40 'real':3,59 'real-world':2,58 'recommend':429 'relat':73 'relev':342 'requir':278,307,330 'respons':304,361 'restat':213 'review':277 'rhythm':168 'roboto':84 'rule':143,158,222,300,327,374,383,425,434 'scale':80,125 'secondari':104,112 'semant':146 'sentenc':219 'skeumorph':1,19,35 'skill':22 'skill-skeumorphism' 'source-bergside' 'space':124,167,352 'specifi':235 'standard':315 'state':137,156,238,303,331,351,369 'statement':392 'structur':280,289 'style':74,77 'success':106,114 'surfac':8,120 'system':21,31,285,399 't-exampl':441 'testabl':309,395 'text':122,164 'textur':7,61 'threshold':387 'token':109,147,225,294,357,386 'tone':139,314 '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':350 'trade':195 'trade-off':194 'typographi':79,353 'ui':264 'ui/ux':53 'uncertain':182 'usag':358 'use':46,287,419 'valu':150 'variant':239,302 'visibl':135,336 'visual':76,152 'warn':107,116 'wcag':128 'weight':91 'workflow':211 'world':4,60 'write':138,251","prices":[{"id":"b5b12dc5-bd9d-4ac9-804b-4469b2467ee6","listingId":"3ad5d11f-2983-4b7a-97fe-2017c2ed1adc","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:42.381Z"}],"sources":[{"listingId":"3ad5d11f-2983-4b7a-97fe-2017c2ed1adc","source":"github","sourceId":"bergside/awesome-design-skills/skeumorphism","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/skeumorphism","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:42.381Z","lastSeenAt":"2026-05-02T12:53:55.482Z"}],"details":{"listingId":"3ad5d11f-2983-4b7a-97fe-2017c2ed1adc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"skeumorphism","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":"85f3aa3140ec6c540ed8b4fcc741cb0e8a59ae0f","skill_md_path":"skills/skeumorphism/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/skeumorphism"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"skeumorphism","license":"MIT","description":"Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/skeumorphism"},"updatedAt":"2026-05-02T12:53:55.482Z"}}