skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

claymorphism

Generates implementation-ready design-system guidelines for claymorphism UI styling.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#design system#design tokens#ui design#component guidelines#claymorphism
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill claymorphism-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/claymorphism
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill claymorphism-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams adopting the claymorphism visual style often lack consistent, implementation-ready rules, leading to inconsistent spacing, low-contrast text, and mismatched components across their UI. ## Core Features & Use Cases - Design Token Foundations: Provides a defined palette (primary #3B82F6, success #16A34A, warning #D97706, danger #DC2626), typography scale (Poppins, Montserrat, JetBrains Mono), and 4/8/12/16/24/32 spacing rhythm. - Component-Level Rules: Guides authoring of component anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review QA checklist. - Use Case: A designer-engineer pair building a playful dashboard can use this Skill to produce a complete claymorphism guideline document with tokens, button states, and accessibility criteria ready for code review. ## Quick Start Use the claymorphism skill to generate a design-system guideline for buttons and cards following its soft 3D clay style.

Frequently Asked Questions about claymorphism

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

FAQPage Schema
How do I create a claymorphism design system for my UI?▼

Start by defining foundational tokens: the claymorphism palette (primary #3B82F6, surface #FFFFFF), typography (Poppins display, Montserrat body), and a 4/8/12/16/24/32 spacing scale. Then specify component anatomy, states, and accessibility criteria before writing component-level rules.

What colors and fonts does claymorphism use?▼

This style uses primary #3B82F6, success #16A34A, warning #D97706, danger #DC2626, and text #1C398E on white surfaces. Typography pairs Poppins for headings, Montserrat for body text, and JetBrains Mono for labels, with weights from 100 to 900.

Does claymorphism meet WCAG accessibility requirements?▼

The guidelines target WCAG 2.2 AA with keyboard-first interactions and visible focus states. Rules explicitly prohibit low-contrast text, and every accessibility statement must be testable in implementation, with accessibility prioritized over aesthetics when conflicts arise.

What component states should claymorphism guidelines define?▼

Component rules must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. Each rule should describe keyboard, pointer, and touch interaction behavior plus explicit spacing, typography, and color-token usage.

When should I avoid using claymorphism styling?▼

Avoid claymorphism when the playful puffy aesthetic conflicts with brand tone or when its soft low-elevation surfaces risk insufficient contrast. The guidelines prohibit mixing multiple visual metaphors and ambiguous labels, so strictly formal or dense data interfaces may need a different style.

Related Skills

Explore More Design & Creative Skills→
unthinkmediaunthinkmedia

ux-design-system-auditor

Audit UI implementations against design system guidelines for compliance deviations.

Community
Intermediate
WP-CoachingWP-Coaching

tailwind-design-system

Builds Tailwind CSS design systems with tokens, CVA variants, and accessible components.

Official
Intermediate
vesvietvesviet

frontend-testing

Add frontend test coverage using Playwright, MSW v2, and WCAG 2.2 accessibility gates.

Community
Advanced
tylerwindtylerwind
47

ui-neumorphic-design

Apply dual shadows, soft highlights, and typography rules for neumorphic UI styling.

Community
Basic