Guides building, auditing, and validating Atomico.js web components with TypeScript.
npx skills add https://github.com/atomicojs/atomico --skill atomico
Please help me install this Agent Skill. Skill: atomico Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico Command: npx skills add https://github.com/atomicojs/atomico --skill atomico
Writing Atomico.js web components correctly requires knowing framework-specific rules for props, state hooks, events, JSX typing, and Shadow DOM behavior, and mistakes like void callbacks or extracted handlers silently break type inference and event propagation.
Create an Atomico counter component with a reflected size prop and validate it against the project rules.
High-intent search queries and answers about installing and using this skill.
Define the component with c(render, config) where the render function returns a <host> root element and config declares props and styles. Export the constructor from the component file and register it with customElements.define only in a central index file.
Use the shorthand form like label: String for simple read-only props, and a config object with a factory callback like { type: Number, value: () => 0 } when a default or reflect is needed. Static values in the value field are forbidden.
Use event<Detail>() for fire-and-forget notifications dispatched as CustomEvents, and callback<Fn>() only when the child awaits a return value from the parent. Callbacks must never return void, and neither should be prefixed with 'on'.
Native events like change and submit have composed: false, so they cannot cross the Shadow DOM boundary. Declare a custom event with { bubbles: true, composed: true } in props and dispatch it explicitly from the internal native handler.
Use useState only for a single isolated private value like a boolean toggle. Use useObjectState whenever managing two or more related values, since it supports partial updates and avoids redundant render cycles from multiple useState calls.
Yes, Atomico infers prop types from the props config block and infers event target types for inline JSX handlers. Extracting handlers to standalone constants breaks this inference, and Array or Object props need explicit factory return-type annotations.
zotoioCreate and integrate a new package into the X-Fidelity monorepo.
Asymmetric-alBuild composable, accessible UI components with design tokens and documentation.
lushly-devRun Playwright E2E tests with visual regression and axe-core accessibility checks.
IgniteUIAdds a reactive property to an existing Lit web component with decorators and tests.
