{"id":"a7201dd0-26bc-4457-a22b-031188f02866","shortId":"EeUGYA","kind":"skill","title":"neumorphism","tagline":"Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Neumorphism club Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for neumorphism.\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=#006666, secondary=#F1F2F5, success=#00A63D, warning=#FE9900, danger=#FF2157, surface=#E7E5E4, text=#1E2938\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":["neumorphism","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-neumorphism","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/neumorphism","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,598 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.634Z","embedding":null,"createdAt":"2026-04-18T22:11:34.188Z","updatedAt":"2026-05-02T12:53:54.634Z","lastSeenAt":"2026-05-02T12:53:54.634Z","tsv":"'006666':115 '00a63d':119 '1':252 '100':96 '1e2938':127 '2':263 '2.2':135 '200':97 '3':274 '300':98 '4':283 '400':99 '5':293 '500':100 '6':305 '600':101 '700':102 '800':103 '900':104 'aa':136 'accept':286,350 'access':133,224,285,346,431,452,455 'activ':377 'add':294 'adject':419 'aesthet':450 'ai':66 'alon':420 'altern':238 'ambigu':201,418 'anatomi':277,341 'anchor':421 'anti':296,359 'anti-pattern':295,358 'area':211 'aria':147 'author':34,250 'avoid':187,191,195,200,203,208 'behavior':181,213,282,345,385,402 'brand':52 'build':60 'case':405 'checklist':310,365 'clariti':226 'clean':72 'clear':158 'club':20,56 'code':316 'color':105,396 'color-token':395 'compact':130 'compon':219,271,276,338,366,494 'component-level':270,337 'concis':155,244 'concret':230,479 'confid':156 'conflict':448 'consist':220,440 'constraint':268,457 'content':290,352 'content-writ':289 'context':330 'contrast':75,189 'creat':37 'criteria':287,351 'danger':111,122 'decor':196 'default':183,231,372 'defin':264,369 'densiti':131 'depend':416 'describ':383 'design':21,31,51,175,255,324,333 'design-system':30,323 'desktop':81 'desktop-first':80 'direct':46 'disabl':378 'display':89 'do-rul':472 'e7e5e4':125 'edg':404 'element':5 'embed':17 'empti':408 'empty/loading/error':177 'end':306 'engin':49 'ensur':179 'error':380 'everi':430,471 'exampl':357,429,456,483 'execut':314 'exist':302,493 'expect':212,292,368 'expert':29 'explain':233 'explicit':174,399 'express':83 'extrud':3 'f1f2f5':117 'fe9900':121 'ff2157':123 'first':82,139,217 'flag':447 'focus':142,248,375 'focus-vis':374 'follow':214 'font':85 'foundat':68,216,267,336 'friend':159 'gate':412 'generat':322 'goal':332 'guidanc':42,242,273,326,491 'guidelin':33,249 'help':157 'hierarchi':170 'high':74 'high-contrast':73 'hit':210 'hover':373 'html':145 'implement':40,247,363,437 'implementation-focus':246 'implementation-readi':39 'inaccess':209 'includ':284,400,489 'inconsist':192,303 'info':112 'inner':7 'intent':256 'interact':140,172,281,384 'introduc':485 'jetbrain':93 'join':53 'keep':171,241 'keyboard':138,387 'keyboard-first':137 'label':152,202,407 'languag':458 'least':477 'level':272,339 'load':379 'local':445 'long':406 'look':18 'low':188 'market':63 'matrix':77 'metaphor':207 'migrat':299,490 'minim':71 'mission':25 'mix':204 'mode':132 'monet':61 'mono':88,91,92,94 'monochromat':12 'motion':197 'multipl':205 'must':433,460 'negoti':464 'neumorph':1,19,36 'new':487 'non':463 'non-negoti':462 'note':300 'novelti':228 'off':236 'one':258,443,478 'one-off':442 'opinion':243 'optim':446 'outer':9 'output':319 'overflow':410 'pair':470 'palett':106 'pattern':297,360,488 'peopl':58 'play':76 'pointer':388 'possibl':240 'practic':38 'prefer':162,438 'preserv':168 'primari':86,107,114 'priorit':223,454 'privat':55 'product':64 'prohibit':362 'propos':261 'provid':229 'purpos':199 'qa':309,364 'qualiti':411 'raw':166 'reader':150 'readi':41 'recommend':469 'relev':382 'requir':318,347,370 'respons':180,344,401 'restat':253 'review':317 'rhythm':194 'rule':160,184,262,340,367,414,423,465,474 'scale':79,84,129 'screen':149 'screen-read':148 'secondari':108,116 'semant':144,163 'sentenc':259 'shadow':10 'skill':23 'skill-neumorphism' 'soft':2 'source-bergside' 'space':87,90,128,193,392 'specifi':275 'standard':355 'state':143,173,178,278,343,371,391,409 'statement':432 'structur':320,329 'style':67,70 'success':109,118 'surfac':13,124 'system':22,32,325,439 't-exampl':481 'tactil':16 'test':151 'testabl':349,435 'text':126,190 'threshold':427 'token':113,164,265,334,397,426 'tone':154,354 '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':390 'trade':235 'trade-off':234 'typographi':78,393 'ui':4,304 'uncertain':222 'univers':24 'usag':398 'use':47,327,459 'valu':167 'variant':279,342 'visibl':141,376 'visual':69,169,206 'warn':110,120 'wcag':134 'weight':95 'without':198 'workflow':251 'write':153,291","prices":[{"id":"ec47a5bd-6668-431d-8b08-6773d233f820","listingId":"a7201dd0-26bc-4457-a22b-031188f02866","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:34.188Z"}],"sources":[{"listingId":"a7201dd0-26bc-4457-a22b-031188f02866","source":"github","sourceId":"bergside/awesome-design-skills/neumorphism","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/neumorphism","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:34.188Z","lastSeenAt":"2026-05-02T12:53:54.634Z"}],"details":{"listingId":"a7201dd0-26bc-4457-a22b-031188f02866","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"neumorphism","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":"13d74952d01b9603d7b3ed01d2839cf4cd3045b9","skill_md_path":"skills/neumorphism/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/neumorphism"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"neumorphism","license":"MIT","description":"Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/neumorphism"},"updatedAt":"2026-05-02T12:53:54.634Z"}}