メニュー
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/fengshao1227/ccg-workflow --skill glassmorphismコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SEO 增长引擎。GSC 分析、关键词研究、标题优化、多语言翻译、内链策略、技术审计。当用户提到 SEO、CTR、曝光、踩词、优化标题、搜索排名、GSC、内链、写博客、翻译文章时路由到此。
CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.
AI/LLM 能力索引。Agent 开发、LLM 安全、RAG 系统。当用户提到 AI、LLM、Agent、RAG、Prompt 时路由到此。
SOC 職業分類に基づく
SKILL.md を表示中
| name | glassmorphism |
| description | Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects. |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
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);
}
}