Menú
Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación 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 | glassmorphism |
| description | Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。 |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
| context | fork |
| paths | *.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss |
rgba() or hsla() with alpha 0.05–0.4backdrop-filter: blur() ranging 8–40px for frosted-glass effect1px solid rgba(255,255,255,0.18)) to define edgesbox-shadow for depth separation from backgroundReference: references/tokens.css
Use CSS custom properties from tokens.css for consistent theming:
@import 'references/tokens.css';
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
}
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
padding: 1.5rem;
}
.glass-nav {
background: var(--glass-bg-heavy);
backdrop-filter: var(--glass-blur-strong);
-webkit-backdrop-filter: var(--glass-blur-strong);
border-bottom: var(--glass-border);
box-shadow: var(--glass-shadow);
position: sticky;
top: 0;
z-index: 100;
}
.glass-modal-backdrop {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.glass-modal {
background: var(--glass-bg-heavy);
backdrop-filter: var(--glass-blur-strong);
-webkit-backdrop-filter: var(--glass-blur-strong);
border: var(--glass-border);
border-radius: var(--glass-radius-lg);
box-shadow: var(--glass-shadow-elevated);
}
.glass-btn {
background: var(--glass-bg-light);
backdrop-filter: var(--glass-blur-light);
-webkit-backdrop-filter: var(--glass-blur-light);
border: var(--glass-border);
border-radius: var(--glass-radius);
transition: background 0.2s;
}
.glass-btn:hover {
background: var(--glass-bg);
}
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
backdrop-filter | 76+ | 103+ | 9+ (-webkit-) | 79+ |
rgba() backgrounds | All | All | All | All |
-webkit-backdrop-filter for Safari support@supports fallback with solid semi-transparent bg.glass-card {
background: rgba(255, 255, 255, 0.85); /* fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
}
}
prefers-reduced-transparency media query to disable blur/transparency for users who need itprefers-contrast: more to increase border opacity and reduce transparency@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
}
}
@media (prefers-contrast: more) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.3);
}
}