skills.rest
marcusgoll
marcusgollCOMMUNITY
Explore all skills by this author →
Website𝕏@marcusgollGitHub

shadcn-integration

Bridge OKLCH design tokens with shadcn/ui components for Next.js theming.

91|10|Updated Oct 4, 2025
Search Tags:#UI#Next.js#OKLCH#shadcn#design-tokens
One-click install
npx skills add https://github.com/marcusgoll/Spec-Flow --skill shadcn-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-integration
Source: https://github.com/marcusgoll/Spec-Flow/tree/main/.claude/skills/shadcn-integration
Command: npx skills add https://github.com/marcusgoll/Spec-Flow --skill shadcn-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about shadcn-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up OKLCH design tokens with shadcn/ui in Next.js?▼

OKLCH design tokens integrate with shadcn/ui by running /init --tokens --shadcn, which generates a token-driven theme through eight configuration questions. This creates design/systems/shadcn-variables.css, components.json, and tokens.json files that establish OKLCH as your source of truth with CSS variable aliases for all shadcn components.

Does shadcn/ui support WCAG-compliant color theming?▼

Yes. This integration enforces OKLCH as the source of truth for colors, delivering WCAG-compliant palettes automatically. shadcn variables alias OKLCH tokens, ensuring accessible color contrast across your entire component library without manual color adjustments.

Can I customize shadcn component colors without editing CSS?▼

Yes. The questionnaire provides eight customization options to configure colors, typography, borders, and component variants without touching CSS. Answers populate design token files that automatically apply to all shadcn components and support dark mode via CSS variables.

What files does the shadcn OKLCH integration generate?▼

The integration generates three core files: design/systems/shadcn-variables.css (CSS variable definitions), components.json (shadcn configuration), and design/systems/tokens.json (OKLCH token definitions). These work together to establish a token-driven theming pipeline for your Next.js project.

How does automatic dark mode work with OKLCH tokens?▼

Dark mode is automatically supported through CSS variable aliases. OKLCH tokens remain the source of truth, and CSS variables adapt automatically based on system or user preference, ensuring consistent theming without separate dark-mode token definitions.

Related Skills

Explore More Software Engineering Skills→
SjdjdiejdrirhdkjejSjdjdiejdrirhdkjej

shadcn-integration

Automates shadcn UI integration with OKLCH design tokens in Next.js projects.

Community
Intermediate
Marcus-Mok-GHMarcus-Mok-GH

shadcn-integration

Automate shadcn/ui integration with OKLCH design tokens in Next.js projects.

Community
Intermediate
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
fusenginefusengine
22

theming-tokens

Organize primitive, semantic, and component design tokens for UI theming.

Community
Intermediate