Menu
Claymorphism 黏土态设计（柔软膨胀、大圆角、双向内阴影、偏移外阴影）。
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
CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.
变更校验关卡。分析代码变更，检测文档同步状态，评估变更影响范围。当用户提到变更检查、文档同步、代码审查、提交前检查、diff分析时使用。在设计级变更、重构完成时自动触发。
模块完整性校验关卡。扫描目录结构、检测缺失文档、验证代码与文档同步。当用户提到模块校验、文档检查、结构完整性、README检查、DESIGN检查时使用。在新建模块完成时自动触发。
代码质量校验关卡。检测复杂度、重复代码、命名规范、函数长度等质量指标。当用户提到代码质量、复杂度检查、代码异味、重构建议、lint检查、代码规范时使用。在复杂模块、重构完成时自动触发。
安全校验关卡。自动扫描代码安全漏洞，检测危险模式，确保安全决策有文档记录。当用户提到安全扫描、漏洞检测、安全审计、代码安全、OWASP、注入检测、敏感信息泄露时使用。在新建模块、安全相关变更、攻防任务、重构完成时自动触发。
从近期开发会话中萃取可复用的模式 / 决策 / 教训。当用户提到提取教训 / 复盘 / lessons learned / 知识沉淀 / 经验萃取 / 提炼模式时使用。会扫 .context/ 决策日志 + git log 提交语义。
| name | claymorphism |
| description | Claymorphism 黏土态设计（柔软膨胀、大圆角、双向内阴影、偏移外阴影）。 |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
| context | fork |
| paths | *.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss |
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);
}
}