Menu
Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
SEO 增长引擎。GSC 分析、关键词研究、标题优化、多语言翻译、内链策略、技术审计。当用户提到 SEO、CTR、曝光、踩词、优化标题、搜索排名、GSC、内链、写博客、翻译文章时路由到此。
CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.
AI/LLM 能力索引。Agent 开发、LLM 安全、RAG 系统。当用户提到 AI、LLM、Agent、RAG、Prompt 时路由到此。
架构设计能力索引。API设计、安全架构、云原生、数据安全。当用户提到架构、设计、API、云原生时路由到此。
数据工程。Airflow、Dagster、Kafka Streams、Flink、dbt、数据管道、流处理、数据质量。当用户提到数据管道、ETL、流处理、数据质量时路由到此。
开发语言能力索引。Python、Go、Rust、TypeScript、Java、C++、Shell。当用户提到编程、开发、代码、语言时路由到此。
| name | claymorphism |
| description | Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows. |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
border-radius (20–50px) for a puffy, inflated lookbox-shadow offset (not centered) to ground the elementReference: references/tokens.css
@import 'references/tokens.css';
.clay-card {
background: var(--clay-bg-card);
border-radius: var(--clay-radius-lg);
box-shadow: var(--clay-shadow);
color: var(--clay-text);
}
.clay-card {
background: var(--clay-bg-card);
border-radius: var(--clay-radius-lg);
box-shadow: var(--clay-shadow);
padding: 1.5rem;
color: var(--clay-text);
}
.clay-btn {
background: var(--clay-bg-button);
border: none;
border-radius: var(--clay-radius-pill);
box-shadow: var(--clay-shadow);
padding: 0.75rem 1.5rem;
color: var(--clay-text);
cursor: pointer;
transition: box-shadow 0.2s;
}
.clay-btn:hover {
box-shadow: var(--clay-shadow-elevated);
}
.clay-btn:active {
box-shadow: var(--clay-shadow-pressed);
}
.clay-input {
background: var(--clay-bg);
border: none;
border-radius: var(--clay-radius);
box-shadow: var(--clay-shadow-pressed);
padding: 0.75rem 1rem;
color: var(--clay-text);
}
.clay-input:focus {
outline: 2px solid var(--clay-accent);
outline-offset: 2px;
}
.clay-toggle {
width: 56px;
height: 30px;
background: var(--clay-bg-card);
border-radius: var(--clay-radius-pill);
box-shadow: var(--clay-shadow-pressed);
}
.clay-toggle-knob {
width: 24px;
height: 24px;
background: var(--clay-bg);
border-radius: 50%;
box-shadow: var(--clay-shadow);
transition: transform 0.2s;
}
rgba(255,255,255,0.05) vs 0.6) to avoid glowing artifacts[data-theme="dark"] in tokens.css--clay-text:focus outlines since clay shadows alone don't indicate focusprefers-contrast: more to flatten shadows and increase text contrast@media (prefers-contrast: more) {
.clay-card {
box-shadow: 0 0 0 2px var(--clay-text);
}
}