nakamotosai

Gruvbox Theme — Development skill for Claude Code

Development community

Gruvbox color tokens + Claude/agent skill to retheme web UIs.

How to install Gruvbox Theme

This entry records only its repository, not the path inside it, so there is no exact command to give. Open nakamotosai/gruvbox-theme and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Gruvbox Theme does

Gruvbox color tokens + Claude/agent skill to retheme web UIs.

Alternatives in Development

Analyze Feature Requests — Prioritize feature requests by theme, impact, effort, and risk 7.8k ★
Mono Color Skill — One-ink editorial print image skill — warm paper, halftone photography, active negative space, and restrained 3k ★
Theme Color Conventions — Extensions in this repo use a consistent color language mapped to Pi's theme tokens 526 ★

README

**🌐 Made by [Sai](https://saaaai.com) · [saaaai.com](https://saaaai.com)** — AI workflow · one homepage

**[English](README.md) · [简体中文](README.zh-CN.md) · [日本語](README.ja.md)**

gruvbox-theme

**Gruvbox color tokens + UI pairing guide + Claude/agent skill** Stop hunting hex codes — and stop guessing which color goes on text, buttons, and cards.

Default: **classic-dark-medium** bg `#282828` · ink `#ebdbb2` · accent `#fe8019` · link/aqua `#8ec07c`

All sub-themes at a glance

![All gruvbox-theme variants](docs/compare.svg)

Interactive wall: [preview/index.html](preview/index.html) · compact strip: [docs/swatch-hint.svg](docs/swatch-hint.svg)

What this is / is not

Ships	Does not ship
Official absolute palette + 10 semantic JSON packs	Full React/Vue component library
Drop-in CSS variables	Brand fonts / illustration rules
How to pair colors on real UI → docs/usage.en.md	Everforest-style "almost gruvbox" mashups
`SKILL.md` apply steps for AI agents	Terminal-only installers (hex still reusable)

Palette contract + pairing guide — not another UI kit.

Component pairing (summary)

Full guide: **[docs/usage.en.md](docs/usage.en.md)** (中文 [usage.md](docs/usage.md)).

UI part	Token
Page background	`--bg` (deeper chrome / code → `--bg-deep`)
Cards / dialogs	`--surface` + border `--border`
Body text	`--ink`
Meta / secondary	`--ink-muted` · placeholders `--ink-dim`
Primary button	`--accent` fill + `--on-accent` text (one CTA per region)
Secondary / ghost	`--surface-2` or transparent + `--border`
Links	`--link` (aqua — not the same orange as primary)
Error / danger	`--red` (copy/stroke; avoid huge solid red blocks)
Success dot	`--green` · warning `--accent-2`