Menu
Apple Liquid Glass 液态玻璃设计（半透明、深度感知、Apple 设计语言）。
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 | 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