Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Claymorphism Design Spec — measured AI agent skill | DecimalAI

fengshao1227/claymorphism

NewSkillScoreMaintained

Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.

by fengshao1227

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull fengshao1227-claymorphism

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/fengshao1227-claymorphism/SKILL.md

Raw file: /s/fengshao1227-claymorphism/SKILL.md ↗ · machine-readable summary at /s/fengshao1227-claymorphism.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 23h ago

Yes — +45% lift+11% tokens0% turns77% of whole cases pass with skill (17/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	-20%	0%
case-01	✗→✓	▲ Improved	23%	0%
case-02	✗→✓	▲ Improved	41%	0%
case-07	✗→✓	▲ Improved	-22%	0%
case-10	✗→✓	▲ Improved	-20%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

fengshao1227 / ccg-workflow

templates/skills/domains/frontend-design/claymorphism/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Claymorphism Design Spec

3 Core Elements

Large Radius — Generous border-radius (20–50px) for a puffy, inflated look
Dual Inner Shadows — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
Offset Outer Shadow — Directional box-shadow offset (not centered) to ground the element

CSS Tokens

Reference: references/tokens.css

css
@import 'references/tokens.css';

.clay-card {
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-lg);
  box-shadow: var(--clay-shadow);
  color: var(--clay-text);
}

Component Examples

Card

css
.clay-card {
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-lg);
  box-shadow: var(--clay-shadow);
  padding: 1.5rem;
  color: var(--clay-text);
}

Button

css
.clay-btn {
  background: var(--clay-bg-button);
  border: none;
  border-radius: var(--clay-radius-pill);
  box-shadow: var(--clay-shadow);
  padding: 0.75rem 1.5rem;
  color: var(--clay-text);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.clay-btn:hover {
  box-shadow: var(--clay-shadow-elevated);
}
.clay-btn:active {
  box-shadow: var(--clay-shadow-pressed);
}

Input

css
.clay-input {
  background: var(--clay-bg);
  border: none;
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow-pressed);
  padding: 0.75rem 1rem;
  color: var(--clay-text);
}
.clay-input:focus {
  outline: 2px solid var(--clay-accent);
  outline-offset: 2px;
}

Toggle

css
.clay-toggle {
  width: 56px;
  height: 30px;
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-pill);
  box-shadow: var(--clay-shadow-pressed);
}
.clay-toggle-knob {
  width: 24px;
  height: 24px;
  background: var(--clay-bg);
  border-radius: 50%;
  box-shadow: var(--clay-shadow);
  transition: transform 0.2s;
}

Dark Mode Notes

Dark mode reduces inner highlight intensity (rgba(255,255,255,0.05) vs 0.6) to avoid glowing artifacts
Outer shadow opacity increases to maintain depth on dark backgrounds
Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
All dark tokens are defined in [data-theme="dark"] in tokens.css

Accessibility Notes

Ensure contrast ratio ≥ 4.5:1 for text — clay backgrounds are muted, verify against --clay-text
Provide visible :focus outlines since clay shadows alone don't indicate focus
Use prefers-contrast: more to flatten shadows and increase text contrast

css
@media (prefers-contrast: more) {
  .clay-card {
    box-shadow: 0 0 0 2px var(--clay-text);
  }
}

Want to see if fengshao1227/claymorphism would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.