skills.rest
josoroma
josoromaCOMMUNITY
Explore all skills by this author →
GitHub

theme-system

Applies and migrates Luma/shadcn theme token sets with preview and rollback support.

6|Updated Jul 12, 2026
Search Tags:#theming#rollback#next.js#tailwind#dark mode#shadcn#css tokens
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill theme-system-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-system
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/theme-system
Command: npx skills add https://github.com/josoroma/AppLoop --skill theme-system-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Applying or migrating a visual theme across a generated Next.js project often leads to inconsistent colors, broken dark mode, and hard-coded values scattered through components. This Skill enforces a registry-driven workflow so every theme change produces consistent semantic tokens in both light and dark modes. ## Core Features & Use Cases - Theme Registry Management: Register built-in or custom Luma/shadcn themes with light/dark token maps, preview swatches, and stable kebab-case ids. - Semantic Token Enforcement: Preserve semantic token names, reject arbitrary selectors, imports, and URLs, and tolerate pasted shadcn CSS by stripping fences, comments, and known legacy tokens. - Preview and Rollback: Capture the previous token file before applying a theme, validate contrast and surfaces in a live preview, and restore the prior file if validation fails. - Use Case: A template needs its own palette. Register luma-cv-indigo via defineBuiltInTheme() in lib/themes/registry.ts, add matching swatch CSS in app/globals.css, and point the template at the new id so it appears in the Create Project modal. ## Quick Start Apply the luma-indigo-emerald theme to this project and preview it in both light and dark modes.

Frequently Asked Questions about theme-system

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

FAQPage Schema
How do I register a custom shadcn theme palette?▼

Register a custom palette by calling defineBuiltInTheme() in lib/themes/registry.ts with light and dark token overrides, then set the template's defaultThemeId in lib/projects/templates.ts. Only override tokens that differ from canonicalLight and canonicalDark.

How do I apply a theme to a generated Next.js project?▼

Resolve the theme id from server-provided project context, locate the project's token file, and apply the full light and dark token set atomically. Then run validation and preview checks for contrast, focus rings, and modal surfaces.

Why do theme preview swatches appear blank or black?▼

Blank swatches happen when app/globals.css lacks data-theme-id rules for the new theme id, or when preview.secondary and preview.background use dark-mode values. Add a four-line CSS block per theme id and keep preview values in light-mode colors.

Why does creating a custom theme fail with an unsupported token error?▼

The parser rejects any token not in REQUIRED_THEME_TOKENS or IGNORED_CUSTOM_THEME_TOKENS. Add template-specific variables like --board to IGNORED_CUSTOM_THEME_TOKENS in lib/themes/registry.ts rather than weakening validation for imports or arbitrary selectors.

Can I paste shadcn theme CSS directly into the custom theme input?▼

Yes, pasted CSS is normalized before validation: markdown fences, block comments, and line comments are stripped, and known legacy tokens are ignored. Tokens defined only in :root fall back for .dark, but arbitrary selectors, imports, and URLs are still rejected.

What happens if theme validation fails after applying tokens?▼

The previous token file is captured before applying a theme, so a validation failure triggers an automatic restore of that file. If rollback itself fails, the process stops and reports the affected file and validation command.

Related Skills

Explore More Software Engineering Skills→
tonehqtonehq
11

create-component

Generate React and Next.js UI component scaffolds with shadcn/ui and Tailwind CSS.

Official
Advanced
rocket-jobs-airocket-jobs-ai

rj-install

Install and bootstrap rocket-jobs-app with environment checks and migrations.

Official
Advanced
EsdevenimentsEsdeveniments
2

design-system-conventions

Enforce semantic design tokens and UI styling rules across frontend codebases.

Official
Basic
Owl-ListenerOwl-Listener
2.0k

theming-system

Map design tokens to dynamic themes across brands and modes.

Community
Advanced