菜单
Build self-contained, drop-in HTML components (hero, pricing, features, testimonials, footer, etc.) that work inside any existing page without conflicts. Outputs a single code block with scoped CSS, semantic HTML, and minimal JS.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/wpgaurav/WordPress-skills --skill just-html命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.
Use when pushing content, docs, posts, changelogs, or other updates to Fluent Community spaces through the Fluent Community REST API.
Generate or edit design for WordPress Gutenberg blocks using Greenshift/GreenLight plugin. Convert any data to wordpress blocks or convert greenshift blocks back to html + css + js. Use when user asks to create design with Greenshift or Greenlight blocks for wordpress site, convert anything to wordpress blocks or build charts in content. Triggers on keywords: wordpress, gutenberg, greenshift, greenlight, convert to wordpress, convert greenshift blocks to vanilla html, build chart.
基于 SOC 职业分类
正在显示 SKILL.md
| name | just-html |
| description | Build self-contained, drop-in HTML components (hero, pricing, features, testimonials, footer, etc.) that work inside any existing page without conflicts. Outputs a single code block with scoped CSS, semantic HTML, and minimal JS. |
| user_invocable | true |
Build drop-in HTML sections that work inside any existing page without conflicts. One code block. No dependencies. No collisions.
Before writing any code, ask the user these questions (skip any already answered):
gh, gl, ai). Default: first two letters of brand/project nameOnce requirements are clear, proceed to build.
<style>, <section>, and <script> (if needed) in that order<!DOCTYPE>, <html>, <head>, <body>, or <meta> tags<section> must have a unique class name: [prefix]-[component] (e.g., brand-hero, brand-pricing):root--[xx]- (e.g., --gh-primary, --gh-text)[xx]- (e.g., gh-inner, gh-title)color-mix() for derived colors (soft backgrounds, hovers, light borders) instead of hardcoded hex values.component *, .component *::before, .component *::after { box-sizing: border-box; }ghFadeUp not fadeUp)<a> tags for CTAs and navigation links, not <button> with onclick(function(){ ... })();document.querySelector scoped to component classes<script> block entirely if the component is purely staticBecause tokens are CSS custom properties on the section class, the user can override from their theme stylesheet without touching the component:
.brand-hero {
--gh-primary: #2563EB;
}
Return the complete component as a single fenced code block (```html). No file splitting. No build steps. Copy-paste ready.