Bennypowers Cem
- 45 repo stars
- Updated July 27, 2026
- bennypowers/cem
bennypowers-cem is a Claude Code plugin that wires Custom Elements Manifest tooling, dev server, LSP, and MCP into web component workflows.
About
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. Developers 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.
- 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
Bennypowers Cem by the numbers
- Data as of Jul 28, 2026 (Skillselion catalog sync)
/plugin install bennypowers-cem@bennypowers/cemAdd your badge
Show developers this plugin is listed on Skillselion. Paste this into your README.
| repo stars | ★ 45 |
|---|---|
| Last updated | July 27, 2026 |
| Repository | bennypowers/cem ↗ |
What it does
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.
Who is it for?
Best when you're maintaining Lit or standards-based component libraries and want agent autocomplete grounded in Custom Elements Manifests.
Skip if: React-only SPAs with no web components or teams that do not run Claude Code with MCP enabled.
What you get
After install, Claude Code can query CEM-backed MCP and validation tooling so suggestions match real component tags, attributes, and events.
- Generated Custom Elements Manifest JSON for your package
- Agent-accessible component metadata via MCP
- Validated tag and property suggestions aligned with your source
By the numbers
- pluginCount: 1
- GitHub stars: 38
- Repository: bennypowers/cem
Recommended Plugins
0xdesign Design PluginDesign exploration plugins for Claude Code743
Adlsdztony Claude Marketplace1 plugin2
Alexanderop Claude Skill Vue DevelopmentA Claude Code Agent Skill for Vue.js development with TypeScript, emphasizing testing-first development, functional patterns, and maintainable architecture.27
Alonw0 Web Asset GeneratorClaude skill to generate favicons, app icons, and social media images from logos, text, or emojis.469
Ankish8 Storybook NpmLocal plugins for myOperator UI2
Antvis Chart Visualization Skills⛏️ Turning data into a visual language for better thinking with Skills.446How it compares
Web Components CEM and MCP dev toolkit, not a generic CSS framework skill or backend API generator.
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.