Menu
Demo HTML creation methodology — single-file demos with section comments for 1:1 WordPress conversion
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
WordPress legacy theme best practices — proper enqueueing, escaping, hooks, security, and performance
Rank Math SEO configuration reference, schema JSON-LD templates, meta patterns, and SEO seeding commands
Audit criteria, severity definitions, report JSON schema, and quality thresholds for wp-audit agents
WP-CLI-first principle — use WP-CLI instead of generating PHP code whenever possible, with command reference, ACF seeding patterns, and environment-aware execution
Environment detection, configuration, and WP-CLI wrapper selection for local WordPress development
Bilingual/multilingual i18n methodology using ACF _suffix pattern with transparent translation helpers
| name | wp-demo |
| description | Demo HTML creation methodology — single-file demos with section comments for 1:1 WordPress conversion |
| user-invocable | false |
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 <style> block.
Demos are the design-first step before WordPress development:
<style> block is extracted verbatim into the theme's assets/css/styles.csstemplate-parts/section-*.php file in WordPressdemo/
├── index.html # Homepage demo
├── pricing.html # Pricing page demo
├── about.html # About page demo
└── ... # One file per page
demo/index.htmldemo/<page-slug>.html (e.g., demo/pricing.html, demo/software.html)Each demo is a single HTML file containing everything: meta tags, embedded CSS, HTML content, and optional inline JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Name — Page Title</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============ Section: Variables ============ */
:root {
/* Colors */
--color-primary: #1a5632;
--color-primary-light: #2d7a4a;
--color-primary-dark: #0f3d22;
--color-secondary: #c9a84c;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-500: #737373;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-text: var(--color-neutral-800);
--color-text-light: var(--color-neutral-500);
--color-text-inverse: #ffffff;
--color-background: #ffffff;
--color-background-alt: var(--color-neutral-50);
--color-border: var(--color-neutral-200);
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* Typography */
--font-family-primary: 'Inter', sans-serif;
--font-family-secondary: 'Playfair Display', serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.5rem;
--font-size-4xl: 3rem;
/* Other tokens */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-full: 9999px;
--transition-base: all 0.3s ease;
--container-max: 1280px;
}
/* ============ Section: Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text);
background: var(--color-background);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* ============ Section: Layout ============ */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* ============ Section: Header ============ */
.header { ... }
/* ============ Section: Hero ============ */
.hero { ... }
/* ============ Section: Services ============ */
.services { ... }
/* ... more sections ... */
/* ============ Section: Footer ============ */
.footer { ... }
/* ============ Section: Responsive ============ */
@media (max-width: 1024px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 576px) { ... }
</style>
</head>
<body>
<!-- ============ SECTION: Header ============ -->
<header class="header">
<div class="container">
<div class="header__inner">
<a href="/" class="header__logo">
<img src="https://placehold.co/180x50?text=Logo" alt="Site Name">
</a>
<nav class="header__nav">
<a href="#" class="nav__link nav__link--active">Home</a>
<a href="#services" class="nav__link">Services</a>
<a href="pricing.html" class="nav__link">Pricing</a>
<a href="#contact" class="nav__link">Contact</a>
</nav>
<a href="#contact" class="btn btn--primary">Get Started</a>
<button class="header__hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<!-- ============ END SECTION: Header ============ -->
<main>
<!-- ============ SECTION: Hero ============ -->
<section class="hero">
<div class="container">
<div class="hero__content">
<span class="hero__label">Welcome to Site Name</span>
<h1 class="hero__title">Your Compelling Headline Here</h1>
<p class="hero__subtitle">A brief supporting description that explains the value proposition in one or two sentences.</p>
<div class="hero__cta">
<a href="#contact" class="btn btn--primary btn--large">Primary Action</a>
<a href="#services" class="btn btn--secondary btn--large">Secondary Action</a>
</div>
</div>
<div class="hero__image">
<img src="https://placehold.co/600x400?text=Hero+Image" alt="Hero image description">
</div>
</div>
</section>
<!-- ============ END SECTION: Hero ============ -->
<!-- ============ SECTION: Services ============ -->
<section class="services section section--alt" id="services">
<div class="container">
<span class="section__label">What We Do</span>
<h2 class="section__title">Our Services</h2>
<div class="services__grid">
<!-- Service cards here -->
</div>
</div>
</section>
<!-- ============ END SECTION: Services ============ -->
<!-- ... more sections ... -->
<!-- ============ SECTION: Contact ============ -->
<section class="contact section" id="contact">
<div class="container">
<!-- Contact content -->
</div>
</section>
<!-- ============ END SECTION: Contact ============ -->
</main>
<!-- ============ SECTION: Footer ============ -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<img src="https://placehold.co/180x50?text=Logo" alt="Site Name" class="footer__logo">
<p class="footer__tagline">Brief company tagline here.</p>
</div>
<div class="footer__links">
<h3 class="footer__heading">Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer__contact">
<h3 class="footer__heading">Contact</h3>
<p>email@example.com</p>
<p>(555) 123-4567</p>
</div>
<div class="footer__social">
<h3 class="footer__heading">Follow Us</h3>
<!-- Social links -->
</div>
</div>
<div class="footer__bottom">
<p>© 2025 Site Name. All rights reserved.</p>
<div class="footer__legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
<!-- ============ END SECTION: Footer ============ -->
<script>
// Minimal JS for demo interactivity (hamburger toggle, scroll effects)
</script>
</body>
</html>
Every distinct section MUST be wrapped with an HTML comment in this exact format:
<!-- ============ SECTION: Hero ============ -->
These comments serve as:
template-parts/section-<name>.php file in WordPress| 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 |
The :root block in the demo <style> is the source of truth for the design system. When converting to WordPress:
:root variables are copied exactly into assets/css/styles.csswp-css-system skill definitionsThe demo creation process relies on two external skills for design guidance:
frontend-design -- provides visual design principles, layout patterns, and component inspirationui-ux-pro-max -- provides UX best practices, interaction patterns, and accessibility guidelinesThese skills are invoked automatically when creating demos. The demo author should follow their guidance for:
Each section in the demo becomes a WordPress template part. The mapping is direct:
Demo HTML WordPress
───────────────────────────── ─────────────────────────────
<!-- SECTION: Hero --> → template-parts/section-hero.php
<h1>Static Title</h1> → <h1><?php echo esc_html(prefix_get_field('hero_title')); ?></h1>
<p>Static description</p> → <p><?php echo esc_html(prefix_get_field('hero_subtitle')); ?></p>
<img src="placeholder"> → <?php $img = prefix_get_field('hero_image'); ?>
<img src="<?php echo esc_url($img['url']); ?>"
alt="<?php echo esc_attr($img['alt']); ?>">
prefix_get_field('field_name')wp_nav_menu()Every demo MUST be fully responsive. See the wp-responsive skill for detailed breakpoint and responsive design standards.
min-width media queriesDemos MUST follow semantic HTML5 and accessibility best practices.
<header> <!-- Site header with nav -->
<nav> <!-- Navigation -->
<main> <!-- Primary page content -->
<section> <!-- Thematic content sections -->
<article> <!-- Self-contained content (blog posts) -->
<aside> <!-- Supplementary content -->
<footer> <!-- Site footer -->
alt attributesaria-label when the visible text is insufficient<label> elementsaria-label="Toggle menu" and aria-expanded<!-- Skip to content link -->
<a href="#main-content" class="sr-only sr-only--focusable">Skip to content</a>
<!-- Hamburger with ARIA -->
<button class="header__hamburger" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<!-- Main content landmark -->
<main id="main-content">
Use placeholder services with realistic dimensions that match the final design intent.
<!-- Hero image -->
<img src="https://placehold.co/600x400?text=Hero+Image" alt="Description of hero image">
<!-- Team member photo -->
<img src="https://placehold.co/300x300?text=Team+Member" alt="Team member name">
<!-- Logo -->
<img src="https://placehold.co/180x50?text=Logo" alt="Site Name">
<!-- Service icon -->
<img src="https://placehold.co/64x64?text=Icon" alt="Service name icon">
<!-- Blog thumbnail -->
<img src="https://placehold.co/400x250?text=Blog+Post" alt="Blog post title">
Choose dimensions that match the expected aspect ratio in the final design:
The demo navigation must match the planned WordPress site structure. Navigation items should reflect the actual pages and sections that will exist.
<nav class="header__nav">
<a href="index.html" class="nav__link nav__link--active">Home</a>
<a href="#services" class="nav__link">Services</a>
<a href="pricing.html" class="nav__link">Pricing</a>
<a href="#contact" class="nav__link">Contact</a>
</nav>
pricing.html)#id links (#services, #contact)--active modifier classThe footer follows a consistent pattern matching the WordPress settings page architecture.
<footer class="footer">
<div class="container">
<div class="footer__grid">
<!-- Column 1: Brand/Logo -->
<div class="footer__brand">
<img src="https://placehold.co/180x50?text=Logo" alt="Site Name" class="footer__logo">
<p class="footer__tagline">Company tagline or brief description.</p>
</div>
<!-- Column 2: Quick Links -->
<div class="footer__links">
<h3 class="footer__heading">Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Column 3: Contact Info -->
<div class="footer__contact">
<h3 class="footer__heading">Contact</h3>
<p>info@example.com</p>
<p>(555) 123-4567</p>
<p>123 Main St, City, ST 12345</p>
</div>
<!-- Column 4: Social -->
<div class="footer__social">
<h3 class="footer__heading">Follow Us</h3>
<div class="footer__social-links">
<a href="#" aria-label="Facebook">FB</a>
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="LinkedIn">LI</a>
</div>
</div>
</div>
<!-- Footer bottom: copyright + legal -->
<div class="footer__bottom">
<p>© 2025 Site Name. All rights reserved.</p>
<div class="footer__legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
The footer maps to the WordPress settings/options page fields:
site_logo (option field)footer_tagline (option field)social_facebook, social_instagram, etc. (option fields)footer_copyright (option field)contact_email, contact_phone, contact_address (option fields)demo/ directory<style> block (no external CSS files):root variables match the design system (wp-css-system skill)<!-- ============ SECTION: Name ============ --> comment/* ============ Section: Name ============ */