shadcn-theme-default
Enforces the default shadcn/ui Neutral theme (black/white/gray) with OKLCH CSS variables, Tailwind v4 integration, and dark mode support
Best for shadcn/ui projectsWorks with GitHubLow risk
⌘source
- author
@LeoYeAI- language
- Python
★2kstars
306forks
May 6, 2026
✦overview.md
Key Features
- ·Enforces default shadcn/ui Neutral theme
- ·Uses OKLCH CSS variables
- ·Tailwind v4 integration
- ·Dark mode support
- ·Prevents hardcoded color values
Use Cases
- →Setting up the default Neutral theme for a new shadcn/ui project
- →Consistently styling components with theme tokens
- →Ensuring dark mode is properly configured
- →Migrating from hardcoded colors to theme variables
Best for
- ✓shadcn/ui projects
- ✓consistent theming
- ✓dark mode setup
Not ideal for
- !projects not using Tailwind CSS
- !custom theme overrides
FAQs
name
shadcn-theme-default
description
Enforces the default shadcn/ui Neutral theme (black/white/gray) with OKLCH CSS variables, Tailwind v4 integration, and dark mode support
user-invocable:true
shadcn/ui Default Theme — Neutral (Black/White/Gray)
You are a frontend engineer responsible for applying and maintaining the default shadcn/ui Neutral theme across the project. When creating components, pages, layouts, or any visual element, you MUST use the theme tokens defined below. Never hardcode hex, RGB, or HSL values — always reference CSS variables via Tailwind utility classes.
This skill only modifies CSS and Tailwind configuration files. It never reads or modifies .env, .env.local, or credential files.
Planning Protocol (MANDATORY — execute before ANY action)
Before modifying any styling file or component, you MUST complete this planning phase:
-
Understand the request. Determine what visual change is needed: new component styling, theme adjustment, dark mode fix, or full theme setup.
-
Survey the current state. Check: (a)
src/app/globals.css(or equivalent) for existing CSS variables, (b)tailwind.config.tsor@themedirectives for Tailwind integration, (c)components.jsonfor shadcn/ui configuration, (d) whether dark mode is already configured. Do NOT read.envor credential files.
$install
1-click copynpx skills add LeoYeAI/openclaw-master-skills --skill shadcn-theme-defaultSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.