メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
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".
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.
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".
Suggest and generate custom element compositions for a UI goal. Use when the user asks to "compose elements", "build a layout", "combine components", "create a page with", "what elements should I use for", or describes a UI they want to build using custom elements.
| name | cem-serve |
| description | 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. |
| tools | Read, Bash, Glob, Grep |
Configure and run cem serve to preview custom elements with live reload,
auto-generated import maps, and interactive knobs.
Runtime imports must be in dependencies, not devDependencies. The import
map generator only resolves packages from dependencies.
{
"dependencies": {
"lit": "^3.0.0"
},
"devDependencies": {
"@pwrs/cem": "^0.9.0"
}
}
Create .config/cem.yaml with generate and serve sections:
generate:
files:
- elements/*/my-*.ts
output: custom-elements.json
designTokens:
spec: tokens/my-tokens.json
prefix: my-prefix
demoDiscovery:
fileGlob: elements/*/demo/*.html
urlPattern: /elements/:tag/demo/:demo.html
urlTemplate: /elements/{{.tag}}/demo/{{.demo}}/
serve:
transforms:
css:
include:
- "elements/**/*.css"
generate.files: globs for element source filesgenerate.output: manifest output pathgenerate.designTokens: DTCG token file and CSS custom property prefixgenerate.demoDiscovery: how to find and route demo filesserve.transforms.css.include: globs for CSS files to serve as JS modules (enables import styles from './el.css' with { type: 'css' })Demos are HTML partials, not full documents. No <!DOCTYPE>, <html>, or
<head>. Include inline <script type="module"> and <style> as needed.
The index.html demo is the default — keep it minimal (simplest possible usage).
Additional demos show specific features or variants.
Use <meta itemprop="name"> and <meta itemprop="description"> on non-index
demos for display in the dev server UI.
For demo authoring conventions, see the write-demos skill.
cem serve --rendering=chromeless strips the dev server UI, serving bare demo
HTML with import maps and transforms — ideal for browser-based testing with
Playwright or Puppeteer. Append ?rendering=chromeless to any demo URL for
per-request chromeless mode without restarting.
See the gen-tests skill for full test scaffolding with page objects against
chromeless demos.
cem generate
Verify demos appear without warnings. If you see "No URL configured for demo",
check that demoDiscovery.urlPattern uses URLPattern syntax (:param captures,
not regex).
cem serve
Default port is 8000. Use --port <n> to change.
Open http://localhost:8000. The UI should show element demos in the sidebar.
Check browser console for import errors — if a bare specifier fails, the
package needs to be in dependencies.
Move the package from devDependencies to dependencies and reinstall.
Delete the cached manifest and regenerate: rm custom-elements.json && cem generate
lsof -ti:8000 | xargs kill or use --port.
cem serve regenerates the manifest in the background on file changes. If the
background regen produces a smaller/empty manifest, ensure generate.files in
the config matches your source globs — the background regen uses the config,
not CLI args.