{"id":"cf357cf7-d128-4e7b-9ada-b71aa7ba27c8","shortId":"APt3vv","kind":"skill","title":"claymorphism","tagline":"Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# claymorphism Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for claymorphism.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\na modern UI trend characterized by soft, rounded, 3D-like, \"puffy\" shapes that mimic malleable, colorful clay.\n\n## Style Foundations\n- Visual style: modern, high-contrast, playful\n- Typography scale: desktop-first expressive scale | Fonts: primary=Montserrat, display=Poppins, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#FFFFFF, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#1C398E\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\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 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":["claymorphism","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-claymorphism","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/claymorphism","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,355 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:52.258Z","embedding":null,"createdAt":"2026-04-18T22:11:10.833Z","updatedAt":"2026-05-02T12:53:52.258Z","lastSeenAt":"2026-05-02T12:53:52.258Z","tsv":"'1':218 '100':94 '16a34a':116 '1c398e':124 '2':229 '2.2':130 '200':95 '3':240 '300':96 '3b82f6':112 '3d':5,60 '3d-like':4,59 '4':249 '4/8/12/16/24/32':127 '400':97 '5':259 '500':98 '6':271 '600':99 '700':100 '800':101 '900':102 'aa':131 'accept':252,316 'access':128,190,251,312,397,418,421 'activ':343 'add':260 'adject':385 'aesthet':416 'alon':386 'altern':204 'ambigu':171,384 'anatomi':243,307 'anchor':387 'anti':262,325 'anti-pattern':261,324 'author':32,216 'avoid':162,166,170,173 'behavior':179,248,311,351,368 'brand':50 'case':371 'character':55 'checklist':276,331 'clariti':192 'clay':10,68 'claymorph':1,18,34 'code':282 'color':16,67,103,362 'color-token':361 'compon':185,237,242,304,332,460 'component-level':236,303 'concis':141,210 'concret':196,445 'confid':142 'conflict':414 'consist':186,406 'constraint':234,423 'content':256,318 'content-writ':255 'context':296 'contrast':76,164 'creat':35 'criteria':253,317 'd97706':118 'danger':109,119 'dc2626':120 'default':197,338 'defin':230,335 'depend':382 'describ':349 'design':19,29,49,221,290,299 'design-system':28,289 'desktop':81 'desktop-first':80 'direct':44 'disabl':344 'display':88 'do-rul':438 'edg':370 'element':14 'empti':374 'end':272 'engin':47 'error':346 'everi':396,437 'exampl':323,395,422,449 'execut':280 'exist':268,459 'expect':178,258,334 'expert':27 'explain':199 'explicit':158,365 'express':83 'ffffff':114,122 'first':82,134,183 'flag':413 'focus':137,214,341 'focus-vis':340 'follow':180 'font':85 'foundat':70,182,233,302 'gate':378 'generat':288 'goal':298 'guidanc':40,208,239,292,457 'guidelin':31,215 'help':143 'hierarchi':154 'high':75 'high-contrast':74 'hover':339 'implement':38,213,329,403 'implementation-focus':212 'implementation-readi':37 'includ':250,366,455 'inconsist':167,269 'intent':222 'interact':135,156,247,350 'introduc':451 'jetbrain':91 'keep':155,207 'keyboard':133,353 'keyboard-first':132 'label':172,373 'languag':424 'least':443 'level':238,305 'like':6,61 'load':345 'local':411 'long':372 'low':163 'malleabl':9,66 'metaphor':177 'migrat':265,456 'mimic':65 'mimick':8 'mission':23 'mix':174 'modern':52,73 'mono':90,92 'montserrat':87 'multipl':175 'must':399,426 'negoti':430 'neutral':106 'new':453 'non':429 'non-negoti':428 'note':266 'novelti':194 'off':202 'one':224,409,444 'one-off':408 'opinion':209 'optim':412 'output':285 'overflow':376 'pair':436 'palett':104 'pattern':263,326,454 'play':12,77 'pointer':354 'poppin':89 'possibl':206 'practic':36 'prefer':146,404 'preserv':152 'primari':86,105,111 'priorit':189,420 'prohibit':328 'propos':227 'provid':195 'puffi':13,62 'qa':275,330 'qualiti':377 'raw':150 'readi':39 'recommend':435 'relev':348 'requir':284,313,336 'respons':310,367 'restat':219 'review':283 'rhythm':169 'round':3,58 'rule':144,159,228,306,333,380,389,431,440 'scale':79,84,126 'secondari':113 'semant':147 'sentenc':225 'shape':7,63 'skill':21 'skill-claymorphism' 'soft':2,57 'source-bergside' 'space':125,168,358 'specifi':241 'standard':321 'state':138,157,244,309,337,357,375 'statement':398 'structur':286,295 'style':69,72 'success':107,115 'surfac':17,121 'system':20,30,291,405 't-exampl':447 'testabl':315,401 'text':123,165 'threshold':393 'token':110,148,231,300,363,392 'tone':140,320 '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':356 'trade':201 'trade-off':200 'trend':54 'typographi':78,359 'ui':53,270 'uncertain':188 'univers':22 'usag':364 'use':45,293,425 'valu':151 'variant':245,308 'visibl':136,342 'visual':71,153,176 'warn':108,117 'wcag':129 'weight':93 'workflow':217 'write':139,257","prices":[{"id":"b08dee5f-178b-4f39-bb58-79aac6e71682","listingId":"cf357cf7-d128-4e7b-9ada-b71aa7ba27c8","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:10.833Z"}],"sources":[{"listingId":"cf357cf7-d128-4e7b-9ada-b71aa7ba27c8","source":"github","sourceId":"bergside/awesome-design-skills/claymorphism","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/claymorphism","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:10.833Z","lastSeenAt":"2026-05-02T12:53:52.258Z"}],"details":{"listingId":"cf357cf7-d128-4e7b-9ada-b71aa7ba27c8","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"claymorphism","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":"ae7bb3e79991e9fe97fd781370e112410ba715aa","skill_md_path":"skills/claymorphism/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/claymorphism"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"claymorphism","license":"MIT","description":"Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/claymorphism"},"updatedAt":"2026-05-02T12:53:52.258Z"}}