前端设计
- 作者仓库星标 0
- 作者更新于 实时读取
- 作者仓库 skills-registry
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @tomevault-io · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明（默认跨平台）
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: arcan-glass
description: BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + s…
category: 设计与多媒体
runtime: 无特殊运行时
---
# arcan-glass 输出预览
## PART A: 任务判断
- 适用问题：视觉内容、演示材料、信息图或设计交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“Quick Start / 7 Design Principles / Glass Effect System”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于视觉内容、演示材料、信息图或设计交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“Quick Start / 7 Design Principles / Glass Effect System”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。原文没有稳定的斜杠命令要求。安装验证后通常全局生效，直接在对话里点名这个 Skill 并描述任务即可。
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
先用一个小任务确认它会围绕“Quick Start / 7 Design Principles / Glass Effect System”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: arcan-glass
description: BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + s…
category: 设计与多媒体
source: tomevault-io/skills-registry
---
# arcan-glass
## 什么时候使用
- 把设计与视觉方向的常用动作沉淀成 Agent 可调用的技能 适合处理界面、视觉、封面、信息图或演示材料交付，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤…
- 面向视觉内容、演示材料、信息图或设计交付，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「Quick Start / 7 Design Principles / Glass Effect System」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "arcan-glass" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> Quick Start / 7 Design Principles / Glass Effect System
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}Arcan Glass
Arcan Glass is BroomVA's trademark web design language — ArcanBG's brand DNA (AI Blue #0066FF + Web3 Green #00CC66 + dark surfaces) fused with liquid glass web effects (backdrop-filter blur, layered highlights, adaptive tinting, morphing transitions). Dark-first, glass-elevated.
Light mode is Day Glass: a luminous 275° violet surface system, not a white inversion. It keeps hue continuity, uses low chroma to avoid glare, and preserves clear OKLCh lightness distance between surfaces, text, borders, and shadows.
Quick Start
- Copy
assets/globals.cssinto your Next.js project asapp/globals.css - Import in your layout:
import "./globals.css" - Use glass classes:
<div class="glass-card">,<button class="glass-button glass-button-primary">
That's it. All shadcn/ui components will automatically pick up the Arcan Glass theme.
7 Design Principles
- Dark-first, Day Glass second — The default is dark mode. Light mode keeps the same 275° hue DNA with higher lightness, low chroma, and grounded shadows.
- Glass is earned — Only key surfaces (nav, sidebar, modal, featured cards) get backdrop-filter. Limit to 3-5 per viewport.
- Brand through surface — Surface hue 275° (blue-purple) connects all surfaces to AI Blue without competing.
- OKLCh primary — Perceptually uniform lightness enables clean depth scales and natural color mixing.
- Additive on shadcn — Glass effects layer on top of shadcn/ui, never replacing base accessibility.
- Motion with purpose — Every animation communicates state (glow = active, lift = interactive, reveal = entering). Reduced motion is always respected.
- Token-prefixed — All custom properties use
--ag-prefix to avoid collisions with shadcn (--) and Tailwind (--tw-).
Glass Effect System
Every glass component is built from 4 composable layers:
| Layer | Technique | Purpose |
|---|---|---|
| 1. Backdrop blur | backdrop-filter: blur() saturate() |
Frosted glass foundation |
| 2. Highlight | ::before with top-edge gradient |
Light reflection / depth cue |
| 3. Shadow | Multi-level box-shadow |
Elevation / grounding |
| 4. Adaptive tint | color-mix(in oklab) |
Contextual color pickup |
Three intensity presets: glass-subtle (40% / 8px), glass (60% / 16px), glass-heavy (80% / 24px).
See references/glass-components.md for full component patterns.
Color System
Brand colors in OKLCh with hex fallbacks:
| Token | Color | Usage |
|---|---|---|
--ag-ai-blue |
oklch(0.55 0.25 260) / #0066FF |
Primary, interactive, links |
--ag-web3-green |
oklch(0.72 0.19 155) / #00CC66 |
Accent, success, web3 |
5-step surface scale at hue 275°, 4-level text hierarchy, semantic colors, 3-level border scale.
Full palette: references/color-system.md
Tailwind Integration
All tokens wired via @theme inline:
<!-- Brand colors as utilities -->
<div class="bg-ai-blue text-white">Primary</div>
<span class="text-web3-green">Accent</span>
<!-- Glass utilities -->
<div class="glass p-6">Standard glass</div>
<nav class="glass-heavy sticky top-0">Heavy glass nav</nav>
<!-- Glow effects -->
<div class="glass-card glow-blue">Glowing card</div>shadcn/ui components work unchanged — bg-primary, bg-card, text-muted-foreground, etc. all resolve to Arcan Glass tokens.
Full mapping: references/tailwind-integration.md
Component Index
| Component | Class | Glass Level | Notes |
|---|---|---|---|
| Card | .glass-card |
Medium | Highlight + hover lift |
| Nav | .glass-nav |
Heavy | Sticky, bottom border |
| Button | .glass-button |
Medium | + .glass-button-primary, .glass-button-accent |
| Input | .glass-input |
Subtle | Focus ring with blue glow |
| Modal | .glass-modal |
Heavy | + .glass-modal-overlay, reveal animation |
| Sidebar | .glass-sidebar |
Heavy | Full height, right border |
| Badge | .glass-badge |
Subtle | + .glass-badge-blue, .glass-badge-green |
Full patterns with raw CSS + Tailwind composition: references/glass-components.md
Animation Index
| Animation | Tailwind | Duration | Usage |
|---|---|---|---|
| Glow pulse | animate-glow-pulse |
2s loop | Active/loading states |
| Glass reveal | animate-glass-reveal |
0.5s once | Entry animations |
| Gradient flow | animate-gradient-flow |
8s loop | Hero backgrounds |
Plus hover lift, morph, focus ring, scroll reveal patterns.
Full patterns: references/animation-patterns.md
shadcn/ui Compatibility
Arcan Glass defines all required shadcn/ui CSS variables. To add glass variants to shadcn components, extend with cva:
// In your button.tsx variants
glass: "glass glass-highlight hover:-translate-y-px hover:shadow-lg",
"glass-primary": "glass-button glass-button-primary",See references/tailwind-integration.md for full cva examples.
Dark/Light Mode
Uses next-themes with class strategy (.dark / .light). All tokens auto-adapt via CSS custom properties — explicit dark: prefixes are rarely needed. Light mode should be authored as Day Glass: tinted surfaces around OKLCh L=0.91-0.985, primary text near L=0.19, and darker low-chroma borders with alpha instead of pale gray outlines.
<ThemeProvider attribute="class" defaultTheme="dark">
{children}
</ThemeProvider>Performance Notes
- Limit
backdrop-filterto 3-5 elements per viewport — each creates a compositing layer - Use
glass-subtlefor repeated items (list items, table rows) - Reserve
glass-heavyfor landmark surfaces (nav, sidebar, modal) - Test on lower-end devices —
backdrop-filterperf varies by GPU - P3 gamut enhancement is automatic via
@media (color-gamut: p3)— wider chroma on capable displays - Reduced motion is handled globally — all transforms and animations respect
prefers-reduced-motion
Resources
references/
color-system.md— Full OKLCh palette, hex fallbacks, surface scale, text hierarchydesign-tokens.md— Shadows, blur, radius, spacing, typography, transitionsglass-components.md— 4-layer glass system, component CSS patterns + Tailwind compositionanimation-patterns.md— Glow pulse, hover lift, morph, scroll reveal, gradient flowtailwind-integration.md— @theme inline wiring, @utility blocks, shadcn mapping, cva extensions
assets/
globals.css— Drop-in CSS file with all tokens, glass utilities, components, and animations
Source: broomva/arcan-glass — distributed by TomeVault.
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核