Menú
Apple Liquid Glass 液态玻璃设计（半透明、深度感知、Apple 设计语言）。
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 | liquid-glass |
| description | Apple Liquid Glass 液态玻璃设计（半透明、深度感知、Apple 设计语言）。 |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
| context | fork |
| paths | *.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss |
Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
Import the token file in your CSS:
@import 'references/tokens.css';
All tokens are defined in references/tokens.css. Key categories:
| Category | Prefix | Example |
|---|---|---|
| Glass backgrounds | --lg-bg-* | --lg-bg-primary |
| Blur | --lg-blur-* | --lg-blur-md |
| Borders | --lg-border-* | --lg-border-color |
| Shadows | --lg-shadow-* | --lg-shadow-elevated |
| Radius | --lg-radius-* | --lg-radius-lg |
| Animation | --lg-duration-* | --lg-duration-normal |
.glass-card {
background: var(--lg-bg-primary);
backdrop-filter: blur(var(--lg-blur-md));
-webkit-backdrop-filter: blur(var(--lg-blur-md));
border: 1px solid var(--lg-border-color);
border-radius: var(--lg-radius-lg);
box-shadow: var(--lg-shadow-elevated);
transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
}
.glass-card:hover {
transform: translateY(-2px);
box-shadow: var(--lg-shadow-high);
}
.glass-toolbar {
background: var(--lg-bg-toolbar);
backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
-webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
border-bottom: 1px solid var(--lg-border-subtle);
}
.glass-btn {
background: var(--lg-bg-interactive);
backdrop-filter: blur(var(--lg-blur-sm));
border: 1px solid var(--lg-border-color);
border-radius: var(--lg-radius-md);
transition: all var(--lg-duration-fast) var(--lg-easing-spring);
}
.glass-btn:active {
transform: scale(0.97);
background: var(--lg-bg-pressed);
}
.glass-overlay {
background: var(--lg-bg-scrim);
backdrop-filter: blur(var(--lg-blur-xl));
}
.glass-modal {
background: var(--lg-bg-elevated);
border: 1px solid var(--lg-border-color);
border-radius: var(--lg-radius-xl);
box-shadow: var(--lg-shadow-high);
}
Tokens auto-switch via prefers-color-scheme. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.
/* Force a mode on a subtree */
.light-glass { color-scheme: light; }
.dark-glass { color-scheme: dark; }
Use spring-based easing for physical feel:
/* Entry */
@keyframes glass-enter {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.glass-animate-in {
animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
}
contrast-ratio ≥ 4.5:1 for text over glass surfacesprefers-reduced-motion — disable blur animations, use opacity-only transitionsprefers-contrast: high overrides that replace translucent backgrounds with solid ones