Create and manage partial HTML demos for custom elements served by cem serve.
npx skills add https://github.com/bennypowers/cem --skill write-demos
Please help me install this Agent Skill. Skill: write-demos Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/write-demos Command: npx skills add https://github.com/bennypowers/cem --skill write-demos
## What problem does it solve? Write demos are essential for testing and showcasing custom elements with cem serve, while keeping demos lightweight and isolated from a full HTML document.
## Core Features & Use Cases
### Quick Start Place a minimal index demo HTML in the element's demo directory following the partials guideline.
High-intent search queries and answers about installing and using this skill.
To create element demos for cem serve, write self-contained partial HTML files containing module scripts and metadata, omitting DOCTYPE or html, head, and body tags. The generate_html validation ensures these partials are suitable for the server wrapper to render.
A partial HTML demo is a lightweight file without DOCTYPE or full document structure that isolates custom element rendering. Cem serve requires partials because it wraps the content with its own server-side scaffolding and import maps to display the demo.
To associate a single demo with multiple custom elements, use the demo-for metadata field in the partial HTML file. This links the demo to several elements simultaneously, enabling multi-element showcase scenarios within a per-element demo directory.
Custom element demos must pass generate_html validation by omitting DOCTYPE and html, head, or body tags, including module scripts for imports, and ensuring import maps resolve correctly via serve.importMap configuration to render in cem serve.
Yes, cem serve organizes web component demos by supporting minimal index demos for basic rendering and feature demos isolating single functionalities, stored under per-element demo directories and discovered via the generate.demoDiscovery configuration key.
Custom element demos fail validation when including a DOCTYPE tag because cem serve expects partial HTML fragments, not full documents. The generate_html validation rejects complete HTML structures to ensure the server wrapper can properly inject scaffolding.
bennypowersServe custom elements with live reload, import maps, and CSS transforms.
bennypowersGenerates Playwright or Puppeteer-based page object tests for custom elements from cem serve's DevTools previews.
bennypowersAudits custom element manifests for documentation completeness and quality using cem health JSON output.
ProfPowellDefine custom HTML elements and generate custom-elements.json documentation.
