Create claymorphism UI components with CSS tokens and dual inner shadows.
npx skills add https://github.com/telagod/code-abyss --skill claymorphism
Please help me install this Agent Skill. Skill: claymorphism Source: https://github.com/telagod/code-abyss/tree/main/skills/domains/frontend-design/claymorphism Command: npx skills add https://github.com/telagod/code-abyss --skill claymorphism
Claymorphism provides a cohesive design approach to create soft, dimensional UI elements that feel tactile and approachable.
Integrate the claymorphism tokens and apply the clay-card, clay-btn, and clay-input classes to begin.
High-intent search queries and answers about installing and using this skill.
To create claymorphism UI components, apply large border radii, dual inner shadows, and offset outer shadows to cards, buttons, and inputs. The Skill provides CSS tokens and design guidelines to implement this soft clay aesthetic consistently.
Claymorphism is a design style that creates soft, dimensional UI elements feeling tactile and approachable. Use it to revitalize interfaces with depth and warmth, or rapidly implement a cohesive clay UI within a new design system.
Yes, claymorphism supports dark mode and consistent theming across projects. It provides design system tokens and dark-mode considerations to ensure soft, inflated shapes maintain proper visibility and depth in various theme contexts.
Integrate the provided claymorphism CSS tokens into your project and apply the clay-card, clay-btn, and clay-input classes to your HTML elements. This adds the soft, inflated shapes and dual shadows characteristic of the clay aesthetic.
Yes, claymorphism incorporates accessibility considerations within its design guidelines. The CSS tokens are structured to maintain accessible contrast and visual clarity while applying soft, dimensional shadows and large border radii to UI components.
schalkneethlingGenerate a tokens.css file with CSS custom properties for theming and dark mode.
sridCreate production-grade HTML/CSS/JS interfaces with design tokens and responsive behavior.
CatsofsufferingDefine claymorphism design systems with CSS tokens for soft UI components.
okgoogle13Convert Figma Inspect details into React page TSX and CSS files.
