skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

claymorphism

Generate claymorphism design rules with tokens, typography, spacing, and accessibility constraints.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design-system#design-tokens#component-states#ui-guidelines#claymorphism
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill claymorphism-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/claymorphism
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill claymorphism-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns a vague desire for a claymorphism look into clear, implementation-ready design rules that keep teams consistent and accessible.

Core Features & Use Cases

It defines the claymorphism design foundations (typography, color tokens, spacing, and rounding) and provides authoring workflow guidance for producing component-level rules. It is useful when you need a consistent visual system for product UI, design documentation, or component guidelines that must be implemented by engineering teams. It also sets explicit do/don’t constraints to prevent common low-quality variations and accessibility regressions.

Quick Start

Tell the AI to author claymorphism component guidance using the required output structure and include testable accessibility acceptance criteria.

Frequently Asked Questions about claymorphism

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

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

To create claymorphism UI guidelines, you must standardize soft, rounded, puffy component styles using defined typography, color tokens, and spacing rules. This ensures engineering and design teams implement consistent visual systems.

What are the accessibility constraints for claymorphism component states?▼

Accessibility constraints for claymorphism component states require explicit testable acceptance criteria and a QA checklist. These rules prevent common accessibility regressions when applying soft, puffy UI styles.

How do I document design tokens for a clay-like UI style?▼

Documenting design tokens for a clay-like UI style involves defining the foundational typography, color tokens, spacing, and rounding. This standardizes the visual system for implementation-ready component guidelines.

What is the best way to prevent anti-patterns when applying soft UI styles?▼

The best way to prevent anti-patterns in soft UI styles is to generate explicit do and don't constraints within your design-system documentation. This prevents low-quality variations and accessibility regressions across components.

Does claymorphism design guidance work for component anatomy rules?▼

Yes, claymorphism design guidance applies to building component anatomy and state rules. It uses provided tokens, typography, and spacing constraints to generate testable rules for product UI documentation.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

claymorphism

Provide claymorphism design system guidelines with color tokens and typography scales.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

expressive

Generate design guideline documents for UI components using color, typography, and spacing tokens.

Community
Intermediate
bergsidebergside
2.3k

claymorphism

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

Official
Intermediate
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate