vtemian

Opencode Reskin — Development skill for Claude Code

Development community

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

How to install Opencode Reskin

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

What Opencode Reskin does

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

Alternatives in Development

Implementation Plan — You are tasked with creating detailed implementation plans through an interactive, iterative process 10k ★
Outcome Roadmap — Transform output roadmaps into outcome-focused strategic plans 7.8k ★
Agent Of Empires — Manage multiple Claude Code, OpenCode agents from either TUI or Web for easy access on mobile 3.1k ★

README

opencode-reskin

[![CI](https://github.com/vtemian/opencode-reskin/actions/workflows/ci.yml/badge.svg)](https://github.com/vtemian/opencode-reskin/actions/workflows/ci.yml) [![npm version](https://badge.fury.io/js/opencode-reskin.svg)](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