ワンクリックでManusで任意のスキルを実行

write-demos

スター45

フォーク4

更新日2026年3月25日 07:49

Write demo HTML files for custom elements that work with cem serve. Use when the user asks to "write a demo", "create a demo", "add a demo", "demo file", "demo page", or mentions "cem serve demos".

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

bennypowers

bennypowers/cem

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Write Element Demos

Critical: Demos Are Partials

Never include <!DOCTYPE>, <html>, <head>, or <body>. The dev server wraps partials with its own document shell, import maps, and live reload. Adding document structure breaks rendering.

Workflow

1. Gather Context

Read the element's manifest data (cem://element/{tagName} and sub-resources) and check .config/cem.yaml for:

generate.demoDiscovery — fileGlob determines where demos live; urlPattern captures path segments with :param; urlTemplate builds served URLs from those params (supports alias, slug, lower, upper template functions). Example: elements/rh-card/demo/sizes.html with urlTemplate: /elements/{{.tag | alias}}/demo/{{.demo}}/ serves at /elements/card/demo/sizes/. Index demos become the directory root.
serve.urlRewrites (if present) — maps served URLs back to filesystem paths when they differ (e.g., /elements/card/... to /elements/rh-card/...). Most projects don't need this. Check if configured, and set up if asked.
serve.importMap — bare specifiers need to be in dependencies or the import map config

2. Write Demos

Place files where fileGlob expects them (typically elements/my-el/demo/).

Index demo — simplest possible usage, no metadata needed:

<script type="module">
  import '../my-button.js';
</script>

<my-button>Click Me</my-button>

Feature demos — one feature per file, with metadata:

<meta itemprop="name"
      content="With Icon">
<meta itemprop="description"
      content="Button with a leading icon in the icon slot">

<script type="module">
  import '../my-button.js';
  import '../../my-icon/my-icon.js';
</script>

<my-button variant="primary">
  <my-icon slot="icon"
           name="check"></my-icon>
  Save Changes
</my-button>

Multi-element demos — use demo-for to associate with specific elements:

<meta itemprop="demo-for"
      content="my-button my-icon">

3. Validate

Call validate_html on the demo content, then verify:

No document shell tags
Script imports resolve (relative paths from demo file to source)
<meta> tags use itemprop, not name or property

Common Mistakes

Mistake	Fix
Adding `<!DOCTYPE>` / `<html>`	Demos are partials
`<meta name="description">`	`<meta itemprop="description">`
Absolute import paths	Relative from demo file to source
Importing from `devDependencies`	Move to `dependencies`
External CSS/JS links	Inline styles and scripts
Everything in one file	One feature per demo
Missing `type="module"`	Always `<script type="module">`

Guidelines

Index is minimal: default demo should be copy-paste simple
Self-contained: inline all CSS and JS
One feature per file: variants, states, features get separate demos
Use generate_html: produce valid element markup via the MCP tool

このリポジトリの他の Skills

同じリポジトリ

design-api

bennypowers/cem

Design a custom element's public API e.g. attributes, properties, events, slots, CSS parts and custom properties. Use when the user asks to "design an element", "plan a component API", "create element API", "design component interface", or discusses naming conventions, API surface, or element architecture.

2026-03-3145

docs-health

bennypowers/cem

Audit custom element manifest documentation for completeness and quality. Use when the user asks to "check docs", "audit documentation", "review manifest quality", "find missing descriptions", "docs health", or mentions "undocumented" attributes, slots, events, or CSS properties.

2026-03-3145

write-docs

bennypowers/cem

Generate documentation for custom elements based on their manifest data. Use when the user asks to "write docs", "generate documentation", "document this element", "create API docs", or mentions "usage examples" or "component documentation".

2026-03-3145

a11y-review

bennypowers/cem

Review custom element HTML for accessibility issues. Use when the user asks to "review accessibility", "check a11y", "audit accessibility", "find accessibility issues", or mentions "WCAG", "screen reader", "keyboard navigation", or "ARIA" in the context of custom elements.

2026-03-2545

angular

bennypowers/cem

Show how to use custom elements in Angular, including required CUSTOM_ELEMENTS_SCHEMA configuration. Use when the user asks to "use in Angular", "Angular custom elements", "custom elements in Angular", "CUSTOM_ELEMENTS_SCHEMA", or mentions "Angular module", "standalone component", or "angular integration".

2026-03-2545

cem-serve

bennypowers/cem

Set up cem serve for custom element development. Use when the user asks to "start dev server", "set up cem serve", "preview elements", "run demos", or needs help configuring the dev server, import maps, or CSS transforms.

2026-03-2545

name	write-demos
description	Write demo HTML files for custom elements that work with cem serve. Use when the user asks to "write a demo", "create a demo", "add a demo", "demo file", "demo page", or mentions "cem serve demos".
tools	Read, Glob, Grep, generate_html

Write Element Demos

Critical: Demos Are Partials

Never include <!DOCTYPE>, <html>, <head>, or <body>. The dev server wraps partials with its own document shell, import maps, and live reload. Adding document structure breaks rendering.

Workflow

1. Gather Context

Read the element's manifest data (cem://element/{tagName} and sub-resources) and check .config/cem.yaml for:

generate.demoDiscovery — fileGlob determines where demos live; urlPattern captures path segments with :param; urlTemplate builds served URLs from those params (supports alias, slug, lower, upper template functions). Example: elements/rh-card/demo/sizes.html with urlTemplate: /elements/{{.tag | alias}}/demo/{{.demo}}/ serves at /elements/card/demo/sizes/. Index demos become the directory root.
serve.urlRewrites (if present) — maps served URLs back to filesystem paths when they differ (e.g., /elements/card/... to /elements/rh-card/...). Most projects don't need this. Check if configured, and set up if asked.
serve.importMap — bare specifiers need to be in dependencies or the import map config

2. Write Demos

Place files where fileGlob expects them (typically elements/my-el/demo/).

Index demo — simplest possible usage, no metadata needed:

<script type="module">
  import '../my-button.js';
</script>

<my-button>Click Me</my-button>

Feature demos — one feature per file, with metadata:

<meta itemprop="name"
      content="With Icon">
<meta itemprop="description"
      content="Button with a leading icon in the icon slot">

<script type="module">
  import '../my-button.js';
  import '../../my-icon/my-icon.js';
</script>

<my-button variant="primary">
  <my-icon slot="icon"
           name="check"></my-icon>
  Save Changes
</my-button>

Multi-element demos — use demo-for to associate with specific elements:

<meta itemprop="demo-for"
      content="my-button my-icon">

3. Validate

Call validate_html on the demo content, then verify:

No document shell tags
Script imports resolve (relative paths from demo file to source)
<meta> tags use itemprop, not name or property

Common Mistakes

Mistake	Fix
Adding `<!DOCTYPE>` / `<html>`	Demos are partials
`<meta name="description">`	`<meta itemprop="description">`
Absolute import paths	Relative from demo file to source
Importing from `devDependencies`	Move to `dependencies`
External CSS/JS links	Inline styles and scripts
Everything in one file	One feature per demo
Missing `type="module"`	Always `<script type="module">`

Guidelines

Index is minimal: default demo should be copy-paste simple
Self-contained: inline all CSS and JS
One feature per file: variants, states, features get separate demos
Use generate_html: produce valid element markup via the MCP tool