arcan-glass
- Repo stars 0
- Author updated Live
- Author repo skills-registry
- Domain
- Design
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @tomevault-io · no license declared
- Token usage
- Lean
- Setup complexity
- Plug-and-play
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools，默认拥有全部工具权限。
---
name: arcan-glass
description: BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + s…
category: design
runtime: no special runtime
---
# arcan-glass output preview
## PART A: Task fit
- Use case: BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + shadcn/ui projects. Use when creating or styling BroomVA web interfaces, implementing glass/frosted UI effects, setting up brand-consistent dark-first themes, or integrating ArcanBG brand tokens (AI Blue #0066FF, Web3 Green #00CC66) into web applications. Provides a drop-in globals.css, glass component patterns, OKLCh color system, and shadcn/ui compatibility. Use when this capability is needed..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Quick Start / 7 Design Principles / Glass Effect System” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + shadcn/ui projects. Use when creating or styling BroomVA web interfaces, implementing glass/frosted UI effects, setting up brand-consistent dark-first themes, or integrating ArcanBG brand tokens (AI Blue #0066FF, Web3 Green #00CC66) into web applications. Provides a drop-in globals.css, glass component patterns, OKLCh color system, and shadcn/ui compatibility. Use when this capability is needed.”.
- **02** When the source has headings, the agent prioritizes “Quick Start / 7 Design Principles / Glass Effect System” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files.
Start with a small task and check whether the result follows “Quick Start / 7 Design Principles / Glass Effect System”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: arcan-glass
description: BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + s…
category: design
source: tomevault-io/skills-registry
---
# arcan-glass
## When to use
- BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + shadcn/ui projects. Use…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Quick Start / 7 Design Principles / Glass Effect System” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "arcan-glass" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Quick Start / 7 Design Principles / Glass Effect System
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
}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.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review