Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.
npx skills add https://github.com/broomva/skills --skill arcan-glass
Please help me install this Agent Skill. Skill: arcan-glass Source: https://github.com/broomva/skills/tree/main/skills/design/arcan-glass Command: npx skills add https://github.com/broomva/skills --skill arcan-glass
This skill solves the challenge of maintaining brand consistency and high-fidelity UI aesthetics in web projects by providing a standardized, dark-first design language that integrates seamlessly with Next.js, Tailwind v4, and shadcn/ui.
Copy the globals.css file from the assets directory into your project and import it in your root layout to enable the Arcan Glass design system.
High-intent search queries and answers about installing and using this skill.
You implement glassmorphism in Next.js with Tailwind CSS v4 by applying a predefined CSS utility system that handles backdrop-blur, highlights, shadows, and adaptive tinting. Copy the provided globals.css file into your project to instantly enable the 4-layer glass effect system.
The OKLCh color system provides a perceptually uniform color palette based on the 275-degree hue family to ensure depth and readability. It supplies standardized theme tokens that automatically handle dark and light mode transitions for web applications.
Yes, you can use shadcn/ui components with a dark-first Tailwind v4 theme by integrating the provided design language. This skill facilitates seamless integration with shadcn/ui component styling to maintain brand consistency across your web application.
To set up the Arcan Glass design system, copy the globals.css file from the assets directory into your project and import it in your root layout. This enables the OKLCh color tokens and glassmorphism utility classes for your Next.js application.
Yes, you need Tailwind CSS v4 and Next.js to leverage the provided OKLCh color tokens and utility classes. The design system specifically requires these frameworks to properly implement the dark-first themes and backdrop-filter effects.
agusmdevConfigure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.
PostalocityIntegrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.
ChenYCLGenerate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.
ZESCODEApply dark-themed glassmorphism styling to UI components with Tailwind CSS and shadcn/ui.
