claymorphism

Name: claymorphism
Availability: InStock
Author: telagod

Create claymorphism UI components with CSS tokens and dual inner shadows.

238|30|Updated Feb 2, 2026

Search Tags:#accessibility #ui-design #design-system #dark-mode #shadows #claymorphism #tokens-css

Ready to run

npx skills add https://github.com/telagod/code-abyss --skill claymorphism

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Claymorphism provides a cohesive design approach to create soft, dimensional UI elements that feel tactile and approachable.

Core Features & Use Cases

Large radius, dual inner shadows, and offset outer shadows to craft clay-like components such as cards, buttons, and inputs.
Design system tokens and dark-mode considerations to ensure consistent theming across projects.
Use case: Rapidly implement a clay UI in a new design system or revitalize an existing interface with depth and warmth.

Quick Start

Integrate the claymorphism tokens and apply the clay-card, clay-btn, and clay-input classes to begin.

Frequently Asked Questions about claymorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create claymorphism UI components with CSS?▼

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.

What is claymorphism design and when should I use it?▼

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.

Does claymorphism support dark mode and design system theming?▼

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.

How do I apply clay styles to existing web interface elements?▼

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.

Can I use claymorphism tokens for accessibility in UI design?▼

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.