bennypowersCommunity·12 Agent Skills Included

cem

Generate, validate, and document custom elements manifests

Generates custom elements manifests from web component source code and validates them against the official schema. Detects breaking changes between versions, audits documentation quality, and scaffolds demos and browser tests. Provides framework integration guides for React, Vue, and Angular so teams ship consistent, well-documented component libraries faster.

46|4

↗

npx skills add bennypowers/cem --all -g -y

Available:

Gives your AI agent the project's coding, logging, filesystem, and testing conventions so it can run cem commands and modify this codebase correctly.

All Skills in This Repository (12)

Pure Emerald Level Indicators

📦 In Repo

bennypowers

design-api

Plan custom element APIs covering tags, attributes, events, slots, and CSS properties.

write-demos

Create and manage partial HTML demos for custom elements served by cem serve.

vue

Configure Vue projects to treat dash-containing tags as custom elements.

a11y-review

Identify accessibility issues in custom elements with ARIA and slot validation.

compose

Propose compatible custom element compositions and generate combined HTML.

docs-health

Audits custom element manifests for documentation completeness and quality using cem health JSON output.

angular

Generate Angular integration guidance for custom elements with CUSTOM_ELEMENTS_SCHEMA.

gen-tests

Generates Playwright or Puppeteer-based page object tests for custom elements from cem serve's DevTools previews.

cem-serve

Serve custom elements with live reload, import maps, and CSS transforms.

migrate

Identify breaking changes between custom element manifests and generate migration reports.

write-docs

Generate MCP-friendly documentation from custom element manifest data.

react

Integrate custom web components in React 18 and 19 with wrappers and TypeScript typings.

Community

Advanced

Frequently Asked Questions

FAQPage Schema

How to install cem?▼

Run `npx skills add bennypowers/cem --all -g -y` in your terminal to install all skills in this suite globally.

What does cem do for web components?▼

It scans your custom element source code and generates a custom-elements.json manifest, then lets you validate, search, list, and diff that manifest from the command line.

How to find breaking changes between component versions?▼

The migrate skill compares two manifest versions, lists removed or renamed attributes, slots, and events, and shows exactly which files in your project are affected.

Can I use custom elements in React, Vue, or Angular?▼

Yes. Dedicated skills generate the correct integration code for each framework, including React 18 vs 19 differences, Vue's isCustomElement config, and Angular's CUSTOM_ELEMENTS_SCHEMA.

Does cem work with Claude Code and other AI editors?▼

Yes. All skills follow the universal SKILL.md standard and run in Claude Code, Cursor, and other compatible editors, backed by cem's MCP and LSP servers.