Use useEvent and useListener hooks for custom event dispatching and DOM event listening. Triggers when the user needs to dispatch custom events from a component, listen to events on referenced elements, or implement pub/sub communication between web components. Also covers the event() prop helper.
Use useProp hook to create bidirectional bindings to component props. Triggers when the user needs to read AND write a component prop reactively from within the component, especially for two-way data flow or controlled input patterns. Do NOT confuse with regular props access via the render function parameter — useProp provides a setter.
Best practices and patterns for using JSX in Atomico web components. Triggers when the user needs guidance on JSX composition, constructor vs tag-name usage, type inference patterns, slot management, style handling, or virtualDOM rendering behavior. Covers the critical recommendation to prefer constructor instances over tag-name strings for type safety.
Full application patterns and component composition in Atomico. Triggers when the user needs to build a multi-component application, implement parent-child communication, manage shared state across components, or structure a web component project. Covers real-world patterns like todo apps, forms, and component hierarchies.
Create Atomico web components using the `c()` function. Triggers when the user needs to create a new custom element, define reactive props, attach styles, or register a component with `customElements.define`. Do NOT trigger for React, Vue, or Angular component creation. Atomico components are functional web components that return JSX with a mandatory `<host>` root element.
Use Atomico's context system: createContext, useContext, useProvider. Triggers when the user needs to share state or dependencies across nested web components without prop-drilling, implement theme providers, or pass configuration down a component tree. Works across shadow DOM boundaries via events, not React-style fiber context.
Use the css tagged template literal and adoptedStyleSheets for styling Atomico components. Triggers when the user needs to style web components, use CSS custom properties, create themeable components, or understand how Atomico manages stylesheets. Do NOT trigger for external CSS frameworks unless combined with Atomico's css utility.
Use usePromise, useAsync, useSuspense, and useAbortController hooks for asynchronous data fetching and loading state management. Triggers when the user needs to fetch data, handle loading/error/fulfilled states, implement suspense boundaries, or abort in-flight requests in Atomico components.