skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

claymorphism

Standardize claymorphism UI components with WCAG 2.2 AA and keyboard-first interaction rules.

Updated May 13, 2026
Search Tags:#typography#accessibility#design system#tokens#ui components#focus-visible#claymorphism
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill claymorphism-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/claymorphism
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill claymorphism-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claymorphism design guidance helps you create consistent, accessible interfaces with soft, rounded 3D-like “puffy” visuals instead of ad-hoc styling.

Core Features & Use Cases

  • Token-ready foundations: defines typography (Poppins, Montserrat, JetBrains Mono), spacing rhythm (4/8/12/16/24/32), and a clear color palette for implementation.
  • Accessibility and interaction rules: ensures WCAG 2.2 AA, keyboard-first behavior, and explicit focus-visible states.
  • Opinionated implementation constraints: provides do/don’t guidance plus a QA checklist so components stay aligned over time.

Use case: You’re implementing a design system feature set (buttons, inputs, cards, navigation) and need consistent component rules and quality gates for an AI agent to generate UI that matches the Claymorphism style.

Quick Start

Use the claymorphism skill to generate an implementation-ready design-system guideline set for your UI components and their states.

Frequently Asked Questions about claymorphism

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

FAQPage Schema
How do I build accessible claymorphism UI components for a design system?▼

Build accessible claymorphism UI components by standardizing soft, rounded 3D-like visuals with WCAG 2.2 AA compliance, keyboard-first interaction behavior, and explicit focus-visible styling across your product interface.

What typography and spacing tokens work best for claymorphism design systems?▼

Claymorphism design systems use typography tokens for Poppins, Montserrat, and JetBrains Mono, alongside a 4/8/12/16/24/32 spacing rhythm to maintain consistent visual hierarchy and layout structure across components.

How do I enforce quality gates when generating claymorphism UI components?▼

Enforce claymorphism quality gates by applying token-anchored do/don’t guidance and a QA checklist to ensure generated UI components maintain consistent styling, accessibility rules, and interaction states over time.

Can I use claymorphism styling for navigation and input components without breaking accessibility?▼

Yes, claymorphism styling applies to navigation, inputs, buttons, and cards while maintaining WCAG 2.2 AA accessibility through keyboard-first interactions and explicit focus-visible states.

What is the difference between ad-hoc UI styling and a token-anchored claymorphism approach?▼

A token-anchored claymorphism approach replaces ad-hoc styling by standardizing color palettes, spacing, and typography tokens, ensuring consistent component families and interaction states across product interfaces.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
datamonsterrdatamonsterr

ui-design-system

Generate design tokens, typography scales, spacing rules, and breakpoints.

Community
Intermediate
bergsidebergside
2.3k

claymorphism

Standardize claymorphism UI patterns with token-based theming and WCAG 2.2 AA rules.

Official
Intermediate
okgoogle13okgoogle13
1

figma-to-page

Convert Figma Inspect details into React page TSX and CSS files.

Community
Intermediate