Codex Skills + Theme

Upgrade your frontend theme in 60 seconds.

A public skills hub plus a tiny CLI that turns a raw UI into a clean, curated look with a single command. No design debt. No guessing.

Run the demo See the flow
Works on static HTML + Next.js + shadcn/ui Clean diffs + exportable tokens

What happens under the hood

Detect the stack, propose 3 directions, apply the winner, export tokens.

01

Detect stack

Static, Next.js, shadcn, Tailwind. We read your CSS and find existing tokens.

02

Propose 3 styles

Minimal dark, luxury dark, neon. You pick or auto apply.

03

Apply + export

CSS variables, Tailwind mapping, clean diff, and a shareable export.

Pick a direction in seconds

Curated themes mapped to real product vibes.

Luxury dark

Midnight violet, premium feel, calm surfaces.

midnight

Minimal dark

Obsidian neutral, pro contrast, zero noise.

obsidian

Neon

Cyber accents, high energy, bold UI.

neon

Demo script

Copy, paste, watch the diff land.

Install skill 
npx --yes git+ssh://git@github.com/iluxu/codex-skill.git install codex-theme \
  --registry https://raw.githubusercontent.com/iluxu/codex-skills-registry/main/index.json \
  --to ~/.codex/skills
Upgrade 
npm i -D @codex-theme/cli
npx codex-theme upgrade --goal "more premium" --apply
Export tokens 
npx codex-theme export --format css --out ./site/styles/codex-theme.css

Clean diff, no drama

Codex injects a single block and keeps your CSS readable.

globals.css 
- :root { /* old tokens */ }
+ /* @codex-theme:start */
+ @layer base {
+   :root {
+     --background: 240 30% 8%;
+     --foreground: 210 40% 98%;
+     --primary: 262 85% 68%;
+   }
+   .dark {
+     --background: 240 30% 8%;
+     --foreground: 210 40% 98%;
+   }
+ }
+ /* @codex-theme:end */

The hub stack

Registry + MCP + CLI. Build once, install anywhere.

codex-skills-registry
→
codex-skills-mcp
→
codex-skill CLI
→
codex-theme