skills.rest
bennypowers
bennypowersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cem-serve

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

46|4|Updated May 27, 2025
Search Tags:#web-components#custom-elements#dev-server#serve#live-reload#import-maps#cem
One-click install
npx skills add https://github.com/bennypowers/cem --skill cem-serve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cem-serve
Source: https://github.com/bennypowers/cem/tree/main/extensions/claude-code/skills/cem-serve
Command: npx skills add https://github.com/bennypowers/cem --skill cem-serve

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configure cem serve to preview custom elements with live reload and import maps.

Core Features & Use Cases

  • Live reload with import-map aware serving for rapid iteration.
  • Interactive knobs and demo tooling for component testing.
  • CSS transforms and asset handling wired through a predictable dev server workflow.

Quick Start

Run cem serve to preview your elements and demos locally.

Frequently Asked Questions about cem-serve

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up live reload for custom elements previews?▼

Configure live reload for custom elements by running a dev server with import-map aware serving. This provides rapid iteration and interactive previews of web components, enabling automatic browser refresh and dependency resolution during local development.

What is import map generation for web components?▼

Import map generation maps bare module specifiers to URLs for custom elements. The dev server automatically generates these maps during live previews, ensuring browser-native dependency resolution without manual configuration or bundling.

Does cem serve work with a .config/cem.yaml workflow?▼

Yes, cem serve supports a .config/cem.yaml workflow for configuration. It enforces best practices for dependencies in package.json and enables predictable dev server routing, demo routing, and CSS transform pipelines.

How do I test custom elements with interactive knobs and demos?▼

Test custom elements with interactive knobs by using the demo tooling provided by the dev server. This supports component testing through live reload and import-map aware serving for iterative development and rapid visual feedback.

Can I apply CSS transforms when previewing custom elements locally?▼

Yes, you can apply CSS transforms when previewing custom elements. The dev server wires CSS transforms and asset handling through a predictable workflow, enabling style adjustments and processing during live demos.

Related Skills

Explore More Software Engineering Skills→
matchaconematchacone

pre-flight

Validate environment variables, dependencies, database connectivity, and dev server startup.

Community
Intermediate
AloisHAloisH

vite

Configure Vite, add plugins, and build production bundles for web apps.

Community
Intermediate
bennypowersbennypowers
46

write-docs

Generate MCP-friendly documentation from custom element manifest data.

Community
Advanced
jidohyunjidohyun
17

webf-native-ui-dev

Wrap Flutter widgets as WebF custom elements for web apps.

Community
Intermediate