Opencode Reskin

opencode-reskin

[](https://github.com/vtemian/opencode-reskin/actions/workflows/ci.yml) [](https://www.npmjs.com/package/opencode-reskin)

An OpenCode plugin that generates skin transformation plans for web projects.

/skin nof1

https://github.com/user-attachments/assets/c18e0fa7-971f-4b9e-a17c-0923356e6747

Before	After
Original DataFlow	nof1 Skin

Available Skins

Skin	Style	Preview
nof1	Neutral dashboard, chart-focused	View

Quick Start

Add to `~/.config/opencode/opencode.json`:

{ "plugin": ["opencode-reskin"] }

Run the skin command:

/skin nof1

What It Does

When you run `/skin {name}`, opencode-reskin:

• Scans your CSS, Tailwind config, and components
• Compares against the target skin definition
• Outputs an actionable checklist with exact file paths and values

The output is a markdown plan you can execute:

## 1. Colors

### CSS Variables (src/styles/globals.css)
- [ ] Change `--background: #0f172a` → `#ffffff`
- [ ] Change `--foreground: #f8fafc` → `#111111`

### Tailwind Config (tailwind.config.js)
- [ ] Update `colors.background` to `#ffffff`

Architecture: 3 Agents

Agent	Job
opencode-reskin	Orchestrates analysis, generates plan
style-analyzer	Scans CSS, Tailwind, design tokens
component-scanner	Finds UI components and their styling

Subagents analyze your project in parallel, then opencode-reskin comp