skills.rest
atomicojs
atomicojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

atomico-component

Create Atomico web components with host roots, typed props, and shadow DOM styles.

1.3k|44|Updated Aug 25, 2018
Search Tags:#typescript#events#jsx#props#web-components#atomico#shadowdom
One-click install
npx skills add https://github.com/atomicojs/atomico --skill atomico-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: atomico-component
Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-component
Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-component

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about atomico-component

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

FAQPage Schema
How do I create typed web components with Atomico and TypeScript?▼

To create typed Atomico web components, you define a functional component that returns a mandatory host root, declare reactive props with TypeScript types, apply styles using css tagged templates, and register it with customElements.define for reusable custom elements.

What is the mandatory host root in Atomico functional components?▼

The mandatory host root is the required return value of an Atomico functional component, ensuring the custom element correctly maps to its component render structure and maintains predictable shadow DOM behavior.

How do I dispatch typed custom events from an Atomico web component?▼

You dispatch typed custom events from an Atomico web component by using the CustomEvent API within your functional component structure, allowing you to send structured event payloads that integrate seamlessly with TypeScript and JSX projects.

Can I build form-associated custom elements using Atomico?▼

Yes, you can build form-associated custom elements using Atomico, which supports form-associated components alongside typed props, css shadow DOM styles, and typed custom event dispatching for comprehensive custom element development.

What's the best way to declare reactive props with default values in Atomico?▼

The best way to declare reactive props with default values in Atomico is using typed or factory-based prop defaults, which support shorthand declarations, attribute reflection, and custom attribute names for flexible component configuration.

Why should I use constructor references in JSX when composing Atomico components?▼

Using constructor references in JSX when composing Atomico components ensures full type inference, accurate event typing, and reliable bundler dependency tracking for your TypeScript web components.

Related Skills

Explore More Software Engineering Skills→
atomicojsatomicojs
1.3k

atomico-jsx-patterns

Guide JSX patterns for type-safe Atomico web components.

Official
Intermediate
maurodf0maurodf0

webf-hybrid-ui-dev

Wrap Flutter widgets into WebF custom elements for React, Vue, or vanilla JS.

Community
Advanced
atomicojsatomicojs
1.3k

atomico-css-styling

Creates scoped, cacheable stylesheets for Atomico components using adoptedStyleSheets and CSS custom properties.

Official
Intermediate
atomicojsatomicojs
1.3k

atomico-hooks-props

Provide bidirectional reactive access to Atomico component properties.

Official
Intermediate