Guide JSX patterns for type-safe Atomico web components.
npx skills add https://github.com/atomicojs/atomico --skill atomico-jsx-patterns
Please help me install this Agent Skill. Skill: atomico-jsx-patterns Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-jsx-patterns Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-jsx-patterns
This guide solves the common pitfalls and type-safety gaps when using JSX with Atomico by prescribing patterns that enable reliable prop and event inference, predictable shadow DOM and slot behavior, and maintainable component composition.
Show me an Atomico example that composes a typed TodoApp using constructor component references, inline event handlers, and shadowDom with full TypeScript inference.
High-intent search queries and answers about installing and using this skill.
To ensure type-safe prop and event inference in Atomico, use constructor component references rather than string tags. This preserves full TypeScript checking, supports IDE autocompletion, and enables safe refactoring when composing components.
Managing slots and shadow DOM in Atomico involves enforcing the host as the component root and applying default, named, and manual slot strategies. This controls light DOM composition and ensures predictable slot assignment behavior within the shadow boundary.
Optimizing rendering performance in Atomico involves using staticNode for frozen subtrees, keyed lists for efficient reconciliation, and inline event handlers for stronger type inference. CSS variable theming is also recommended for maintainable styling patterns.
Yes, you can infer events and props when composing Atomico components by utilizing inline event handlers and constructor component references. This combination provides strong TypeScript inference, allowing child components to expose strongly-typed events and props throughout the application.
Atomico supports CSS variable theming and inline style patterns to provide maintainable styling for web components. These patterns allow developers to create predictable visual designs while maintaining type safety and developer-friendly refactoring capabilities.
Using constructor references instead of string tags in Atomico JSX preserves full TypeScript prop and event type checking. String tags lose type inference, whereas constructor instances support IDE autocompletion and enable safe refactoring of component composition.
bingeli1379Configure TypeScript and Vite for Vue JSX with Vue-specific attributes.
Marioandres717Enforce modern React 19+ patterns for typed, small components with minimal useEffect.
atomicojsCreates scoped, cacheable stylesheets for Atomico components using adoptedStyleSheets and CSS custom properties.
atomicojsCreate Atomico web components with host roots, typed props, and shadow DOM styles.
