Skills
.Work. You
Rest

shadcn-integration

Community

Bridge OKLCH with shadcn for Next.js.

Software Engineering#UI#Next.js#OKLCH#shadcn#design-tokens
Authormarcusgoll
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Integrates OKLCH design tokens with the shadcn/ui component library to provide WCAG-compliant colors, a consistent token-driven theme, and seamless Next.js integration.

Core Features & Use Cases

  • OKLCH tokens as the source of truth; shadcn variables alias OKLCH tokens.
  • Full shadcn component library compatibility.
  • 8 customization questions to configure the theme without editing CSS.
  • Automatic dark mode support via CSS variables.
  • Menu theming with variants for consistent navigation.

Quick Start

  1. Run the questionnaire: /init --tokens --shadcn (eight questions in sequence).
  2. Review generated files: design/systems/shadcn-variables.css, components.json, and design/systems/tokens.json.
  3. Install dependencies based on answers (e.g., icons and shadcn packages).
  4. Configure Next.js layout to use the generated font and CSS vars.
  5. Add shadcn components and ensure they consume theme tokens.

Note

This skill is auto-triggered by /init --tokens --shadcn and can be invoked for adding shadcn components to a project.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-integration
Download link: https://github.com/marcusgoll/Spec-Flow/archive/main.zip#shadcn-integration

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.