# Just HTML > 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. - Skill: `wpgaurav/just-html` (Agent Skill) - Install (CLI): `npx skillmds@latest add wpgaurav/just-html` - Raw SKILL.md: https://api.skillmd.com/api/skills/wpgaurav/just-html/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: wpgaurav (https://skillmd.com/u/wpgaurav) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wpgaurav/just-html --- # Self-Contained HTML Component Builder Build drop-in HTML sections that work inside any existing page without conflicts. One code block. No dependencies. No collisions. ## When to Use This Skill - Building a standalone section (hero, pricing, features, testimonials, CTA, footer, etc.) - Creating HTML for paste into WordPress Custom HTML blocks, Bricks code elements, GenerateBlocks containers, or raw PHP templates - When the component must not interfere with existing page styles or scripts ## Step 1: Gather Requirements Before writing any code, ask the user these questions (skip any already answered): 1. **What component?** — e.g., hero, pricing table, feature grid, testimonial carousel, FAQ accordion, footer 2. **Namespace prefix** — 2-4 letter prefix for all classes and CSS variables (e.g., `gh`, `gl`, `ai`). Default: first two letters of brand/project name 3. **Brand tokens** — Ask for CSS variables or hex values for: primary color, secondary color, text color, background color, border color, shadow. If not provided, use sensible defaults and note them 4. **Content** — Headings, body text, CTAs, card content, pricing tiers, testimonial quotes, etc. Ask for specifics based on the component type 5. **Design reference** — Any URL, screenshot, or description of the desired look. If none, build a clean modern default 6. **Special behavior** — Toggles, counters, text cycling, scroll animations, tabs? Default: static with hover states only Once requirements are clear, proceed to build. ## Build Rules ### Structure - Output a single code block containing: `