OpenCode plugin for skin transformation planning (opencode-reskin)
npm install 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 |
| Skin | Style | Preview |
|-------|-------|---------|
| nof1 | Neutral dashboard, chart-focused | View |
Add to ~/.config/opencode/opencode.json:
`json`
{ "plugin": ["opencode-reskin"] }
Run the skin command:
``
/skin nof1
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:
`markdown1. Colors
→ #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, guidelinesConfiguration
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
``MIT