Menu
Claymorphism 黏土态设计（柔软膨胀、大圆角、双向内阴影、偏移外阴影）。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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);
}
}