thebusinesstoolkitdev

Claude Greenshift Skill — Design skill for Claude Code

Design community

Claude Code skill: build complete WordPress sites on the Greenshift block builder from a Figma/Paper design, entirely over the REST API — design tokens, pages, header/footer, accessibility, launch sta.

How to install Claude Greenshift Skill

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

What Claude Greenshift Skill does

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Companion — 2,200+ Web & mobile UI for Claude Code & Codex 2.2k ★
Vox Director — Turn one topic into a finished Vox-style paper-collage explainer/ad video — automated end to end on Atlas Clou 2.1k ★

README

claude-greenshift-skill

A [Claude Code](https://claude.com/claude-code) skill for building complete WordPress sites on the **Greenshift** block builder (and the **Greenlight** FSE theme) from a design. Figma, Paper, or a screenshot, entirely over the REST API.

No clicking through the block editor. Design system, pages, header, footer, forms and SEO are all pushed as data, so a build is scriptable, reviewable and repeatable.

A four-page site, design tokens, pages, header, footer, responsive layout, accessibility pass, takes about an hour end to end.

What it gives you

The pipeline, read a design, export and optimise its images, push a token-based design system, generate blocks, create pages, patch the theme's header and footer.
The API behaviour that is not documented, the CSSRender string-versus-boolean and pages-versus-templates contract, Gutenberg's attribute-validation trap, Fluent Forms' duplicate settings rows, Rank Math's REST gap. Each one cost hours to find; see `reference/troubleshooting.md`.
Working tools, a REST client, a block builder, a WCAG contrast gate, a stylebook installer, a live-page verifier, and launch automation.

Install

git clone https://github.com/thebusinesstoolkitdev/claude-greenshift-skill.git   ~/.claude/skills/greenlight

Claude Code picks it up automatically. Ask for a build in plain language, *"recreate this Figma design on my WordPress site"*, or invoke it directly with `/greenlight`.

Requirements: Python 3.8+ (standard library only, Pillow for image conversion), a WordPress site with Greenshift active, and an administrator application password.

Quick start

cat > .env <<'EOF'
WP_URL=https://your-site.com
WP_USER=you@example.com
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx
EOF

python -c "from scripts.wp_api import WP; print(WP().check())"   # expect is_admin + greenshift True

python scripts/check_contrast.py --bg "#fbf6ec" --fg bod