Create and consume cross-shadow-DOM contexts for Atomico web components.
npx skills add https://github.com/atomicojs/atomico --skill atomico-context
Please help me install this Agent Skill. Skill: atomico-context Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-context Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-context
Atomico's context system solves the problem of sharing state or dependencies across nested web components without prop-drilling, especially across shadow DOM boundaries, by providing a purpose-built, event-based context API.
Define a context with createContext, wrap your components with a provider, and consume the value with useContext.
High-intent search queries and answers about installing and using this skill.
To share state across web components without prop-drilling, use an event-based context system. This Skill provides createContext and useContext APIs to pass values directly to nested descendants.
Yes, context can be shared across shadow DOM boundaries in Atomico. The system uses event-based communication to safely traverse nested shadow DOMs and deliver state to deeply nested components.
The best way to override context values in a nested component tree is using nested providers. The useProvider hook supports dynamic updates and scoped overrides at different tree levels for scoped configuration.
To create and consume a context provider for web components, define a context with createContext, wrap components with a provider, and consume the value using the useContext hook for reactive updates.
Yes, Atomico context supports reactive updates when provider values change. The useContext hook retrieves the current value from the nearest provider, enabling reactive components to automatically respond to dynamic state changes.
atomicojsManage Atomico component state and events with composition and context.
mattolenikCreate custom HTML elements with Shadow DOM and RxJS state management.
atomicojsObserve slotted nodes and light DOM children in Atomico components.
PatternsDevCreate reactive Vue stores with Pinia defineStore for shared state.
