# Wp Demo > Demo HTML creation methodology — single-file demos with section comments for 1:1 WordPress conversion - Skill: `yojahny55/wp-demo` (Agent Skill) - Install (CLI): `npx skillmds add yojahny55/wp-demo` - Raw SKILL.md: https://api.skillmd.com/api/skills/yojahny55/wp-demo/raw - Safety review: pending (external: skill-scanner PASS, skillspector CAUTION) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: yojahny55 (https://skillmd.com/u/yojahny55) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/yojahny55/wp-demo --- # Demo HTML Creation Methodology This skill defines how to create **static HTML demo pages** that serve as the design prototype and are later converted 1:1 into WordPress templates. Each demo is a single HTML file with all CSS embedded in a `

Welcome to Site Name

Your Compelling Headline Here

A brief supporting description that explains the value proposition in one or two sentences.

Primary Action Secondary Action

What We Do

Our Services

``` --- ## Section Comments Every distinct section MUST be wrapped with an HTML comment in this exact format: ```html ``` These comments serve as: 1. **Visual delimiters** when scanning the HTML source 2. **Mapping markers** -- each comment maps to a `template-parts/section-.php` file in WordPress 3. **Conversion guide** -- when building the WordPress theme, each section is extracted into its own template part ### Common Section Names | Comment | WordPress Template Part | |---|---| | `SECTION: Header` | `header.php` | | `SECTION: Hero` | `template-parts/section-hero.php` | | `SECTION: Services` | `template-parts/section-services.php` | | `SECTION: About` | `template-parts/section-about.php` | | `SECTION: Testimonials` | `template-parts/section-testimonials.php` | | `SECTION: CTA` | `template-parts/section-cta.php` | | `SECTION: Contact` | `template-parts/section-contact.php` | | `SECTION: Footer` | `footer.php` | --- ## Design System Variables in :root The `:root` block in the demo `