Bennypowers Cem
bennypowers-cem is a Claude Code plugin for the Build phase that wires Custom Elements Manifest tooling, dev server, LSP, and MCP into web component workflows.
by bennypowers · github.com/bennypowers/cem
Give Claude Code accurate Custom Elements Manifest context, dev-server tooling, LSP hints, and MCP access while you build Lit or standards-based web component design systems.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install bennypowers-cem@bennypowers/cemBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:bennypowers/cem") and the paste-ready config with skillselion.get_install_config("plugin:bennypowers/cem").
What it does
bennypowers-cem packages the Custom Elements Manifest (CEM) ecosystem as a Claude Code plugin so agent-assisted work on web components stays aligned with browser standards instead of framework guesswork. Indie builders and small design-system teams shipping Lit or vanilla custom elements get manifest generation, local dev server affordances, language-server style assistance, and an MCP surface that exposes component metadata to Claude. That combination reduces wrong prop names, undocumented slots, and drift between source and published custom element docs. Install it during Build when you are iterating on reusable UI primitives or a component library that must stay consumable across apps. The plugin is intentionally narrow compared with full-stack generators: it excels at component introspection and AI-native understanding, not at backend or DevOps orchestration. Expect intermediate comfort with TypeScript, npm tooling, and registering MCP-capable plugins in Claude Code.
Highlights
- Standards-based Custom Elements Manifest generation for web component libraries
- Dev server and LSP support for intelligent autocomplete and validation
- MCP integration so agents understand component tags, props, and events
- TypeScript and JavaScript workflows with Lit and custom-elements focus
- Single-plugin marketplace entry (pluginCount: 1) from bennypowers/cem
Why builders use it
Agents hallucinate custom element APIs because design systems lack machine-readable manifests and LSP-linked context during frontend work.
After install, Claude Code can query CEM-backed MCP and validation tooling so suggestions match real component tags, attributes, and events.
At a glance
- Type - Plugin in Frontend & UI.
- Adoption - 0 installs, 38 stars, 0 votes.
FAQ
Who is bennypowers-cem for?
It is for developers building design systems or apps with custom elements who want Claude Code to read accurate manifest and LSP data.
When should I use bennypowers-cem?
Use it during Build while generating manifests, running the CEM dev server, or authoring Lit and TypeScript components that agents must understand.
How do I add bennypowers-cem to my agent?
Add the bennypowers/cem marketplace plugin in Claude Code, configure MCP if required by the bundle, and point it at your component package root.
Comments
Share how you use bennypowers-cem, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.