retheme

retheme is a skill for Claude Code from aahil62/unslop. It costs 76 tokens per session (876 once invoked), scanned A, original, MIT.

A process for applying an approved visual design plan to a React and Tailwind website. It updates design tokens, typography, spacing, and page sections in stages, with a build and screenshot check after each pass.

In plain words
What is it for?
Use it to apply a LANE.md design plan to an existing site, update navigation, hero, content sections, and footer, and verify each change.
Why use it?
It provides a controlled way to make a site follow an agreed design while catching visual or build problems during the work.

Skill for Claude Code

Written for Claude Code: ${CLAUDE_PLUGIN_ROOT} variable.

Runs only inside its plugin — its command needs a path that Claude Code sets for a plugin’s own hooks and for nothing else. Install the plugin, not this.

Part of the unslop plugin — 3 skills shipped together

Install

Getting it into your agent

This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.

Claude Code
/plugin marketplace add aahil62/unslop
Claude Code
/plugin install unslop

Made for: Claude Code.

Or install unslop, the plugin that ships this one along with the rest of its 3 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for retheme

README.md
[![agentmods](https://agentmods.dev/badge/skills/aahil62/unslop/retheme.svg)](https://agentmods.dev/skills/aahil62/unslop/retheme)
Your own site
<a href="https://agentmods.dev/skills/aahil62/unslop/retheme"><img src="https://agentmods.dev/badge/skills/aahil62/unslop/retheme.svg" alt="Measured on agentmods" height="20"></a>
Per session 76 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 876 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00076 $0.00876
Opus 5 $0.00038 $0.00438
Sonnet 5 $0.00015 $0.00175
Haiku 4.5 $0.00008 $0.00088

Measured 6d ago against content hash f0dcf6930d76, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

retheme scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/retheme/SKILL.md · 75 lines

How it starts

The opening of the file, as written. The whole thing — 75 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Retheme

Apply the approved lane to the codebase, pass by pass, with evidence at every step. This is the only unslop skill that edits source.

Preconditions (hard)

  1. unslop/LANE.md exists and was user-approved. If missing, stop and run /unslop:interview first.
  2. Clean git state: ask the user to commit or stash, or create a branch (unslop/retheme) before touching anything.
  3. npm run build passes before you start. If it doesn't, fix nothing design-related — report the build error and stop.
  4. Read in full: unslop/LANE.md, ${CLAUDE_PLUGIN_ROOT}/rules/anti-slop-checklist.md, and unslop/DESIGN-AUDIT.md if present (its Top 5 fixes get priority).

Passes (in order — never skip ahead)

Pass 1 — Tokens. Install the lane's :root CSS variables and Tailwind config mapping. Replace stock color classes (indigo-600, gray-50, …) with token-based ones. Load the lane's Google Fonts. No layout changes yet.

Pass 2 — Typography & spacing. Apply the type scale, weights, tracking and leading per the lane. Snap arbitrary spacing to the scale; set the section rhythm.

Pass 3 — Sections, one at a time. Nav → hero → each content section → footer. Apply the lane's surfaces (radius system, depth cue, texture), fix the layout tells from the checklist (L1–L4), and build the lane's signature moment where it belongs. One section per edit batch.

Pass 4 — States & motion. Hover and focus-visible styled to the lane; loading/empty/error states on data-touching UI; motion per the lane's budget with the stated prefers-reduced-motion stance; kill transition-all.

Pass 5 — Exit audit. Re-run the full audit procedure (screenshots, slop-scan, contrast-check, checklist walk) and verify every acceptance check in LANE.md.

Verification after EVERY pass (non-negotiable)

npm run build   # must pass clean
node "${CLAUDE_PLUGIN_ROOT}/scripts/screenshot.mjs" <url> ./unslop/screenshots/pass-N

Read the new screenshots and confirm the pass did what it claimed at 375 and 1440px before starting the next pass. If a pass broke something, fix it inside that pass. Never claim a pass is done without a passing build and fresh screenshots you have actually looked at.

Read the full file on GitHub · 75 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 75 lines · 76 tokens per session scan A f0dcf6930d76

Subscribe to this mod's changes

retheme is a skill published in the GitHub repository aahil62/unslop (17 stars, last pushed 2mo ago), licensed MIT. It adds 76 tokens to every session and 876 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

swiftui-liquid-glass

Design, implement, review, and validate SwiftUI Liquid Glass interfaces across iOS and macOS. Use when choosing native glass effects, grouped glass surfaces, glass button styles, morphing transitions, availability fallbacks, or removing conflicting custom chrome.

gaelic-ghost/socket · 55 tokens

signals-scout-csp-violations

Signals scout for Content Security Policy violations. Watches $cspviolation events for blocked-URL clusters, per-directive bursts, post-deploy regressions, and suspicious third- party domains.

PostHog/ai-plugin · 49 tokens

signals-scout-web-vitals

Signals scout for Core Web Vitals ($webvitals). Watches each page's p75 LCP / INP / CLS / FCP against Google's thresholds and its own history — poor-band pages, band crossings, sharp regressions — and dates each regression against deploys and flag rollouts.

PostHog/ai-plugin · 67 tokens

triaging-visual-review-runs

Inspects PostHog Visual Review (VR) runs that gate PR merges with screenshot regression checks. Use when the user mentions "visual review", "VR", "snapshot diff", "screenshot test", "storybook regression", "playwright snapshot", asks why a PR is blocked or what changed visually, wants to triage the VR backlog, decide…

PostHog/ai-plugin · 136 tokens

building-html-canvases

Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components add no useful structure. Use after building-canvases has routed a canvas request to a plain-HTML/browser-API…

PostHog/ai-plugin · 99 tokens

top-design

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…

wondelai/skills · 113 tokens