oops-theme

Transform any dashboard frontend with a single Claude Code command. Pick a design style, Claude applies it to your existing components — your functionality stays, only the look changes.

8 design styles. Each a completely different design language.

Preview all styles live

---

Quick Start

curl -fsSL https://raw.githubusercontent.com/oopsalldev/oops-theme/main/install.sh | bash

Then in any project:

/oops-theme

Pick a style, answer a few preferences, and watch Claude transform your frontend. Your components and functionality stay intact — only the look changes.

---

Styles

Preview	Style	Description
	Oops Default	Warm coral accent, Syne + DM Sans, floating dark sidebar, gradient buttons, accent glow cards
	Minimal	Swiss design. System font, zero shadows, zero radius, top nav. Content IS the design
	Neo-Brutal	3px borders, hard offset shadows, Space Grotesk, zero radius. Cards like stickers
	Glass	Frosted panels, backdrop blur, neon cyan glow, Inter + JetBrains Mono, dark gradient bg
	Soft	Serif headlines (DM Serif), pastels, 24px radius, warm peach-tinted shadows
	Cash App	Electric green, BLACK text on green buttons, system fonts, 8px radius, fintech minimalism
	trAIder	Neo-brutalist trading terminal. Dark mode: electric lime on black. Syne + IBM Plex Mono
	Editorial	Warm gray bg, Georgia headlines, zero shadows, pill buttons, slow elegant transitions

How it works

1. /oops-theme — pick a style from 8 options
2. Claude reads the style's DESIGN.md — a spec with exact colors, fonts, spacing, patterns
3. Claude audits your codebase — finds your CSS variables, selectors, layout structure
4. Claude applies the design spec to your existing components — styles them, doesn't replace them
5. Build, deploy, check browser — iterate on feedback

Your components stay. Your functionality stays. Only the look changes.

Rollback: git checkout oops-theme/pre-migration -- .

Install

# Global (all projects + auto-update every 6h)
curl -fsSL https://raw.githubusercontent.com/oopsalldev/oops-theme/main/install.sh | bash

# Project only
curl -fsSL https://raw.githubusercontent.com/oopsalldev/oops-theme/main/install.sh | bash -s project

# Uninstall
curl -fsSL https://raw.githubusercontent.com/oopsalldev/oops-theme/main/install.sh | bash -s uninstall

Then in Claude Code:

/oops-theme

Architecture

styles/                     Claude reads these
  oops-default/DESIGN.md     design spec (colors, fonts, patterns)
  minimal/DESIGN.md
  neo-brutal/DESIGN.md
  glass/DESIGN.md
  soft/DESIGN.md
  cashapp/DESIGN.md
  traider/DESIGN.md
  editorial/DESIGN.md

samples/                    You preview these (oops.zone/theme)
  oops-default.html           live HTML preview
  minimal.html
  ...

og/                         OG images (1200x630)
  og-minimal.png
  ...

.claude/commands/
  oops-theme.md               the skill itself

DESIGN.md = what Claude reads. Contains exact color values, font specs, spacing rules, component patterns, anti-patterns. No HTML — just rules.

samples/ = what you see. Live HTML previews on oops.zone/theme. Claude doesn't read these.

Key principles

• Style, don't replace. Claude applies visual rules to your existing components. It doesn't delete your working search bar and add a static one from a sample.
• Edit what's needed. Layout, CSS, components — anything to match the chosen style. All tracked with git tags.
• Build + deploy. After changes, Claude builds and restarts the service so you see the result in your browser.
• Rollback instantly. One git command reverts everything.

Supported stacks

React, Next.js, Vue, Nuxt, SvelteKit, Astro, Angular, Remix, Solid.js, Vanilla HTML/CSS/JS. Tailwind v3/v4, CSS Modules, CSS-in-JS. Monorepo support (Turborepo, Nx, pnpm).

Adding new styles

Create a new directory in styles/ with a DESIGN.md following the same format:

# Design System: {Name}

## Visual Theme & Atmosphere
{description}

## Color Palette
{light + dark tokens}

## Typography
{fonts, weights, sizes}

## Component Patterns
{buttons, cards, inputs, tables — CSS values}

## Anti-Patterns
{what NOT to do}

Then create a preview HTML in samples/ and a screenshot in og/.

License

MIT

---

Built with Claude Code by oops.zone