skills.rest
TheBlueBear02
TheBlueBear02COMMUNITY
Explore all skills by this author →
GitHub

clay-premium

Enforce four-layer clay shadows and convex/concave interactions in web UIs.

Updated Feb 19, 2026
Search Tags:#animations#design-system#claymorphism#clay-premium#shadow-stack#ui-physics#tactile-ui
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill clay-premium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clay-premium
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/clay-premium
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill clay-premium

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clay Premium provides a tactile, clay-inspired design system that adds depth and mass to UI, replacing flat interfaces with four-layer shadow stacks and convex/concave interactions on a lavender canvas.

Core Features & Use Cases

  • Four-layer clay shadow architecture for true depth and volume
  • Candy-store color palette, Nunito/DM Sans typography, and motion tokens
  • Animated background blobs and buoyant micro-interactions for a tactile feel
  • Token-driven design system with responsive breakpoints and asymmetric layouts
  • Use cases: landing pages, dashboards, product UI patterns, AI-assisted design reasoning

Quick Start

Build the sample LandingPage.jsx that demonstrates the 4-layer clay shadow stack, animated blobs, and asymmetric bento grid.

Frequently Asked Questions about clay-premium

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

FAQPage Schema
How do I create tactile claymorphism UI components with multi-layer shadows?▼

Claymorphism adds depth and mass to flat interfaces by applying a four-layer shadow stack and convex/concave interactions. This tactile UI approach uses a candy-store palette, token-driven typography, and animated blobs to create a buoyant, soft 3D feel.

What's the best way to build a landing page with a four-layer shadow system?▼

Build the sample LandingPage.jsx to benchmark quality with a four-layer clay shadow stack, animated background blobs, and an asymmetric bento grid. This demonstrates true depth and volume using token-driven typography and a candy-store palette.

Does this clay UI design system work for dashboards and admin interfaces?▼

Yes, the clay UI language applies across landing pages, dashboards, marketing components, and admin UIs. It enforces tactile interactions and responsive breakpoints with token-driven typography and asymmetric layouts.

Can I use animated background blobs and buoyant micro-interactions in my web app?▼

Yes, you can add animated background blobs and buoyant micro-interactions to web apps to achieve a tactile feel. The system provides motion tokens and a candy-store color palette to prototype tactile interfaces.

When should I not use claymorphism for my web interface?▼

You should avoid claymorphism when flat UI is required for strict data density or minimal aesthetic constraints. The four-layer shadow stack and convex/concave interactions add visual mass that may not suit highly compact admin tables or information-heavy layouts.

Related Skills

Explore More Design & Creative Skills→
FutureAtomsFutureAtoms
1

typography-2026-playful-claymorphism

Provide rounded font pairings and design tokens for React Native Claymorphism systems.

Community
Intermediate
effiemincereffiemincer

frontend-design

Create frontend interfaces with token-based typography, color, spacing, and responsive layouts.

Community
Advanced
FldicoahkiinFldicoahkiin
1

animate

Identify animation opportunities for UI components across web and mobile interfaces.

Community
Advanced
Tasty-Maker-StudioTasty-Maker-Studio

m3-tokens

Provide Material Design 3 token values and color roles for light and dark themes.

Official
Intermediate