# Theme Factory

> Theme Factory Skill

- Skill: `10xequity/theme-factory` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 10xequity/theme-factory`
- Raw SKILL.md: https://api.skillmd.com/api/skills/10xequity/theme-factory/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 10xequity (https://skillmd.com/u/10xequity)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/10xequity/theme-factory

---


# Theme Factory Skill

## Purpose
Generate cohesive theme systems — colour token ramps, font pairings, and light/dark modes — and apply them consistently across an artifact.

## When to use
Use this skill when an artifact needs a named, reusable theme: slide decks, documents, reports, landing pages, or a component library's token layer. Use `design-aesthetics-plan.md` for the mood and direction; use this to turn that direction into concrete tokens.

## Inputs
- artifact type and its existing styling mechanism (CSS variables, Tailwind config, theme object)
- brand colours or reference material, if any
- desired mood in a phrase
- whether both light and dark modes are required

## Output
Return:
- a named theme with a rationale in one sentence
- a colour palette with hex values and a semantic role for each (surface, raised, text, muted text, border, accent, accent-contrast, plus success/warning/danger where needed)
- a font pairing for heading, body, and optional utility roles, with the type scale
- the tokens expressed in the project's actual mechanism
- light and dark variants when requested, verified for contrast in both

## Constraints
- semantic token names, never literal ones — `--surface-raised`, not `--gray-100`
- every text-on-surface pairing must clear WCAG AA; state the measured ratio
- derive ramps systematically rather than picking steps by eye
- reuse existing tokens before adding new ones
- a dark theme is not an inversion — recompute surfaces and reduce accent saturation
- show the theme for review before applying it to the whole artifact

## Examples
- Build a dark/light token system for a landing page
- Generate a theme for a report deck from two brand colours
- Convert ad-hoc hex values scattered through a stylesheet into a named token ramp