greenlight-vibe

Convert Greenshift/GreenLight designs into WordPress Gutenberg blocks with JSON parameters.

14|1|Updated Mar 30, 2026

Search Tags:#html #wordpress #gutenberg #greenshift #greenlight #block-generator

Ready to run

npx skills add https://github.com/wpgaurav/WordPress-skills --skill greenlight-vibe

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: greenlight-vibe
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/wordpress/greenlight-vibe
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill greenlight-vibe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate production-ready WordPress Gutenberg blocks from Greenshift/GreenLight designs by converting HTML/CSS/JS into block-ready code.

Core Features & Use Cases

Convert vanilla HTML/CSS/JS into Greenshift-compatible WordPress blocks.
Convert Greenshift/GreenLight blocks back to HTML/CSS/JS for fallback or inspection.
Output ready-to-paste blocks with JSON parameters and no React dependencies.
Use cases: design-to-block workflows, design-system to WP content pipelines, iterative design verification.

Quick Start

Provide Greenshift/GreenLight design data and ask me to generate WordPress blocks.

Frequently Asked Questions about greenlight-vibe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert Greenshift designs into WordPress Gutenberg blocks?▼

You can convert HTML, CSS, and JS into Greenshift-compatible WordPress blocks by generating output with JSON parameters and no React dependencies. This approach suits design-to-block workflows and site migrations without relying on React.

Can I convert existing Greenshift blocks back to vanilla HTML?▼

Yes, you can convert existing Greenshift or GreenLight blocks back to vanilla HTML, CSS, and JS. This conversion allows for design inspection, fallback usage, or integration into standard content pipelines outside the WordPress block editor.

Do I need React to output production-ready WordPress blocks from GreenLight?▼

No, you do not need React to output production-ready WordPress blocks from GreenLight. The block generation process outputs vanilla HTML alongside JSON parameters, completely removing React dependencies for the final paste-ready code.

What is the best way to separate HTML, CSS, and JS when generating Gutenberg blocks?▼

The best way to separate HTML, CSS, and JS when generating Gutenberg blocks is to convert designs into vanilla HTML with JSON parameters. This ensures clean code separation and direct compatibility with the Gutenberg code editor.

Does the generated WordPress block code work with the Gutenberg code editor?▼

Yes, the generated WordPress block code works directly with the Gutenberg code editor. It outputs vanilla HTML and JSON parameters without React dependencies, making it ready to paste directly into the editor for site migrations.