atomico-component

What problem does it solve?

Building consistent, type-friendly Atomico web components can be error-prone without clear rules for render structure, prop declaration, styling, and event handling. This Skill codifies best practices so developers produce predictable, reusable custom elements that integrate seamlessly with TypeScript and JSX.

Core Features & Use Cases

• Mandatory host root: Enforces returning a host root element so the custom element maps correctly to its component render.
• Typed props and defaults: Shows shorthand and detailed prop declarations including factory defaults, reflection, and custom attribute names.
• Composition and type safety: Recommends using constructor references in JSX for full type inference, event typing, and bundler dependency tracking.
• Styles, events, and forms: Covers css tagged template styles with shadow DOM, typed CustomEvent dispatching, callback function props, and form-associated components.
• Use case: Create a Todo item component in TypeScript that exposes typed props, dispatches structured events, and applies isolated Shadow DOM styles.

Quick Start

Create a new Atomico component that returns a host root, declares a message String prop with a default factory, applies css styles with shadow DOM enabled, and register it with customElements.define.