ReddRadar
Agent skill
claymorphism
Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
Install this agent skill to your Project
npx add-skill https://github.com/telagod/code-abyss/tree/main/skills/domains/frontend-design/claymorphism
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-shadowoffset (not centered) to ground the element
CSS Tokens
Reference: references/tokens.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
.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
.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
.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
.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)vs0.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"]intokens.css
Accessibility Notes
- Ensure contrast ratio ≥ 4.5:1 for text — clay backgrounds are muted, verify against
--clay-text - Provide visible
:focusoutlines since clay shadows alone don't indicate focus - Use
prefers-contrast: moreto flatten shadows and increase text contrast
@media (prefers-contrast: more) {
.clay-card {
box-shadow: 0 0 0 2px var(--clay-text);
}
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
telagod/code-abyss
missing-description
telagod/code-abyss
invalid-tools
invalid tool name
telagod/code-abyss
parse-error
telagod/code-abyss
multi-script
too many scripts
telagod/code-abyss
clash-skill
second duplicate
telagod/code-abyss
clash-skill
first duplicate
Didn't find tool you were looking for?