This skill should be used when the user is building or reviewing theming systems, design tokens, dark mode implementation, CSS custom properties, color naming conventions, or theme switching architecture. Covers the three-tier token model (primitive/semantic/component), purpose-based naming, and the DTCG specification.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
The industry has converged on a three-tier token architecture. Adopting it correctly means theme switching requires only toggling a class — no component re-renders, no complex logic.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
The industry has converged on a three-tier token architecture. Adopting it correctly means theme switching requires only toggling a class — no component re-renders, no complex logic.
Raw values. The palette.
Examples: #3B82F6, 16px, 600
Purpose-driven aliases. The meaning layer.
Examples: --color-text-primary, --color-bg-surface, --spacing-md
Scoped references. The component layer.
Examples: --button-bg, --card-border-radius, --input-border-color
Name tokens by purpose, not appearance.
| Bad (appearance) | Good (purpose) |
|---|---|
--color-white | --color-bg-surface |
--color-blue-500 | --color-action-primary |
--font-large | --font-heading |
--color-gray-200 | --color-border-default |
--color-bg-surface works in both light and dark mode. --color-white becomes meaningless the moment themes change.
Use CSS custom properties with a class toggle on the root element. CSS variables cascade down, automatically updating every component without re-rendering the component tree.
Implementation pattern:
.dark (or [data-theme="dark"]) selector<html> to switch themesUse the hybrid approach:
prefers-color-schemelocalStoragedata-theme attribute on <html>Consider Twitter's three-option model for apps where users spend long sessions:
The DTCG released the first stable specification (2025.10), backed by Adobe, Amazon, Google, Figma, Shopify, and others. Adopting the DTCG JSON format future-proofs token architecture for cross-platform tooling and design-to-code pipelines.
Working implementations in examples/:
examples/three-tier-tokens.md — Complete CSS custom property system: primitives, semantics, component tokens, and DTCG JSON formatexamples/dark-mode-toggle.md — Hybrid theme switching with system detection, localStorage persistence, and framework-specific togglesWhen reviewing or building a token/theming system:
--white, --blue-500)prefers-color-schemelocalStoragedata-theme attribute on <html>