skills.rest
wpgaurav
wpgauravCOMMUNITY
Explore all skills by this author →
Website𝕏@wpgauravGitHub

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
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill greenlight-vibe
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
vcode-shvcode-sh
19

greenshift-blocks

Generate WordPress Gutenberg blocks using Greenshift plugin structures and JSON parameters.

Community
Advanced
WesleySmitsWesleySmits
6

generating-wordpress-fse-blocks

Generate WordPress Full Site Editing blocks and theme scaffolding.

Community
Advanced
respira-pressrespira-press
40

migrate-brizy-to-gutenberg

Audit Brizy pages and translate components into native Gutenberg blocks.

Official
Advanced
wpgauravwpgaurav
14

wp-block-quick

Scaffold custom Gutenberg blocks for WordPress using the Block API and @wordpress/scripts.

Community
Intermediate