opencode-reskin


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

``
/skin nof1
`

https://github.com/user-attachments/assets/1baafe10-f259-45f3-8fca-a203f41cc0ca

| 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:

`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:

`markdown


1. Colors

$3


- [ ] Change --background: #0f172a → #ffffff
- [ ] Change --foreground: #f8fafc → #111111

$3

- [ ] 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 compares findings against the skin definition.

Adding Skins

Skins are JSON files in skins/. Required fields:

`json
{
"name": "my-skin",
"version": "1.0",
"meta": { "target": "web" },
"colors": { "palette": [...], "semantic": [...] },
"typography": { "fonts": [...], "scale": [...] },
"spacing": { "unit": "0.25rem" },
"radius": { "sizes": [...] }
}
`

Optional: dataViz, states, voice, guidelines

Configuration

Optional config at ~/.config/opencode/opencode-reskin.json:

`json
{
"agents": {
"opencode-reskin": { "model": "anthropic/claude-opus-4" }
}
}
`

Development

`bash
bun install
bun run build
bun test
``

License

MIT