Kuzenbo Theme Runtime
Use this skill for external app code that consumes the stable public package @kuzenbo/theme@0.0.6 .
Runtime Setup
- Install:
npm install @kuzenbo/theme next-themes
- Load one prebuilt theme stylesheet at app root:
import "@kuzenbo/theme/prebuilt/kuzenbo.css";
- Add bootstrap + provider in root layout:
import { ThemeBootstrapScript, ThemeProvider } from "@kuzenbo/theme";
<ThemeBootstrapScript /> <ThemeProvider>{children}</ThemeProvider>
Theme Workflow
-
Pick a prebuilt theme from references/prebuilt-themes.md .
-
Use semantic tokens from references/theme-token-families.md instead of hardcoded colors/z-index values.
-
Override tokens in CSS (:root , .dark , or scoped container) for customization.
-
Use runtime helpers from references/theme-runtime-api.md only when custom bootstrap behavior is required.
Guardrails
-
Keep theme CSS import and provider wiring in every Kuzenbo UI runtime.
-
Avoid raw palette classes when a semantic token exists.
-
Prefer cursor-clickable and z-index tokens instead of ad-hoc cursor/z-index literals.
-
Keep imports on the public surface (@kuzenbo/theme , @kuzenbo/theme/theme-provider , @kuzenbo/theme/prebuilt/*.css ).
References
-
references/prebuilt-themes.md
-
references/theme-runtime-api.md
-
references/theme-token-families.md