Wp Variation — Design skill for Claude Code
Generate a WordPress block theme style variation (styles/.json) — dark mode, color palette swap, or font swap.
How to install Wp Variation
Installs to ~/.claude/skills/siddik-web-wp-block-theme-converter-wp-variation/SKILL.md
mkdir -p ~/.claude/skills/siddik-web-wp-block-theme-converter-wp-variation && curl -fsSL https://raw.githubusercontent.com/siddik-web/wp-block-theme-converter/HEAD/commands/wp-variation.md -o ~/.claude/skills/siddik-web-wp-block-theme-converter-wp-variation/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Wp Variation does
description: Generate a WordPress block theme style variation (styles/*.json) — dark mode, color palette swap, or font swap.
/wp-variation
**Purpose:** Generate a WordPress block theme style variation — a `styles/*.json` file that overrides color, typography, and spacing from the base `theme.json` to create an alternative theme aesthetic.
When to Use
Trigger this command when:
- The user wants a dark, light, high-contrast, seasonal, or brand-alternate version of their theme
- T
Alternatives in Design
- Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
- Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★
- Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Obsidian Theme Designer
git clone https://github.com/XiangyuSu611/obsidian-theme-designer ~/.claude/skills/obsidian-theme-designer Des
WP Block Themes
WordPress block theme development
Convert To Wp Theme
Convert a complete HTML/CSS/JavaScript project into a production-ready WordPress block theme (Full Site Editin
Tomevault Design
AUTO-INVOKE on any task that touches frontend, UI, design, components, layout, page, styling, brand, logo, col
3D Jack Portfolio
Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and
3D Jack Portfolio Hero
Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and
Related Agents
Color Analyst
Diagnose and improve project color systems. Covers contrast, harmony, semantics, dark mode, and palette genera
Dark Mode Reviewer
Reviews dark mode implementation for color remapping quality, contrast, and theme consistency.
Style Sync
Checks that CSS custom properties defined in src/styles/main.css (like --accent, --bg, --text) are consistentl