Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
broomva avatar

Arcan Glass

broomva/arcan-glass

  • 5 installs
  • Updated May 14, 2026
  • broomva/arcan-glass

arcan-glass is a skill that provides a drop-in glass/frosted-effect styling system with dark-first OKLCh theming for Next.js, Tailwind v4, and shadcn/ui.

About

A web styling system that adds glass/frosted UI effects and a dark-first brand theme to Next.js, Tailwind v4, and shadcn/ui projects. A frontend developer uses it to drop in a globals.css and apply glass component classes like glass-card and glass-nav. It provides an OKLCh color system, brand tokens, and composable animation presets.

  • Drop-in globals.css with glass/frosted UI effects for Next.js + Tailwind v4 + shadcn/ui
  • OKLCh color system with AI Blue and Web3 Green brand tokens
  • Glass component patterns (card, nav, button, modal, sidebar) and animation presets

Arcan Glass by the numbers

  • 5 all-time installs (skills.sh)
  • Ranked #1,513 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 8, 2026 (Skillselion catalog sync)
At a glance

arcan-glass capabilities & compatibility

Capabilities
frontend · ui design
Use cases
frontend · ui design · web design
IDEs
vscode · cursor ide
From the docs

What arcan-glass says it does

Copy** `arcan-glass/assets/globals.css` into your Next.js project as `app/globals.css`
SKILL.md
Three intensity presets: `glass-subtle` (40% / 8px), `glass` (60% / 16px), `glass-heavy` (80% / 24px).
SKILL.md
All shadcn/ui components automatically pick up the Arcan Glass theme.
SKILL.md
npx skills add https://github.com/broomva/arcan-glass --skill arcan-glass

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs5
Last updatedMay 14, 2026
Repositorybroomva/arcan-glass ↗

What it does

Style Next.js + Tailwind v4 + shadcn/ui interfaces with glass effects, dark-first theming, and OKLCh tokens.

Who is it for?

Adding glass/frosted UI effects and dark-first branding to Next.js + Tailwind + shadcn/ui apps

Skip if: Backend styling or non-Tailwind/shadcn stacks

When should I use this skill?

You are styling a web interface with frosted glass effects or setting up a dark-first brand theme

What you get

A themed Next.js UI with glass components and brand-consistent OKLCh tokens

  • globals.css with tokens, glass utilities, components, and animations

By the numbers

  • 7 glass components
  • 3 glass intensity presets (subtle, glass, heavy)
  • 4 composable glass layers

Files

arcan-glass/SKILL.mdMarkdownGitHub ↗

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

1. Copy assets/globals.css into your Next.js project as app/globals.css 2. Import in your layout: import "./globals.css" 3. 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

1. 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. 2. Glass is earned — Only key surfaces (nav, sidebar, modal, featured cards) get backdrop-filter. Limit to 3-5 per viewport. 3. Brand through surface — Surface hue 275° (blue-purple) connects all surfaces to AI Blue without competing. 4. OKLCh primary — Perceptually uniform lightness enables clean depth scales and natural color mixing. 5. Additive on shadcn — Glass effects layer on top of shadcn/ui, never replacing base accessibility. 6. Motion with purpose — Every animation communicates state (glow = active, lift = interactive, reveal = entering). Reduced motion is always respected. 7. 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:

LayerTechniquePurpose
1. Backdrop blurbackdrop-filter: blur() saturate()Frosted glass foundation
2. Highlight::before with top-edge gradientLight reflection / depth cue
3. ShadowMulti-level box-shadowElevation / grounding
4. Adaptive tintcolor-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:

TokenColorUsage
--ag-ai-blueoklch(0.55 0.25 260) / #0066FFPrimary, interactive, links
--ag-web3-greenoklch(0.72 0.19 155) / #00CC66Accent, 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

ComponentClassGlass LevelNotes
Card.glass-cardMediumHighlight + hover lift
Nav.glass-navHeavySticky, bottom border
Button.glass-buttonMedium+ .glass-button-primary, .glass-button-accent
Input.glass-inputSubtleFocus ring with blue glow
Modal.glass-modalHeavy+ .glass-modal-overlay, reveal animation
Sidebar.glass-sidebarHeavyFull height, right border
Badge.glass-badgeSubtle+ .glass-badge-blue, .glass-badge-green

Full patterns with raw CSS + Tailwind composition: references/glass-components.md

Animation Index

AnimationTailwindDurationUsage
Glow pulseanimate-glow-pulse2s loopActive/loading states
Glass revealanimate-glass-reveal0.5s onceEntry animations
Gradient flowanimate-gradient-flow8s loopHero 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-filter` to 3-5 elements per viewport — each creates a compositing layer
  • Use `glass-subtle` for repeated items (list items, table rows)
  • Reserve `glass-heavy` for landmark surfaces (nav, sidebar, modal)
  • Test on lower-end devices — backdrop-filter perf 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 hierarchy
  • design-tokens.md — Shadows, blur, radius, spacing, typography, transitions
  • glass-components.md — 4-layer glass system, component CSS patterns + Tailwind composition
  • animation-patterns.md — Glow pulse, hover lift, morph, scroll reveal, gradient flow
  • tailwind-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

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What stack does Arcan Glass target?

Next.js with Tailwind v4 and shadcn/ui; shadcn components automatically pick up the theme.

How do you install it?

Copy assets/globals.css into your project as app/globals.css, import it in the layout, then use glass classes like glass-card and glass-button.

Design & UI/UXuibranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.