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.

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".

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.

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.

Generate test scaffolding for custom elements using cem serve's chromeless demo UI with Playwright or Puppeteer. Use when the user asks to "generate tests", "scaffold tests", "create test boilerplate", "write tests for element", "playwright tests", "puppeteer tests", or mentions "test coverage" for custom elements.

Identify breaking changes between custom element manifest versions and suggest migration steps. Use when the user asks to "migrate", "upgrade components", "find breaking changes", "compare manifests", "what changed between versions", or mentions "deprecation" or "migration guide".

Show how to use custom elements in React, including workarounds for React 18 vs 19 differences. Use when the user asks to "use in React", "React wrapper", "custom elements in React", "JSX custom element", or mentions "React 18", "React 19", or "react integration".

Show how to use custom elements in Vue, including required configuration for the Vue compiler. Use when the user asks to "use in Vue", "Vue custom elements", "custom elements in Vue", "isCustomElement", or mentions "Vue 3", "Vue 2", "Nuxt", or "vue integration".

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".