atomicojsOfficial·14 Agent Skills Included

atomico

Build fast, reusable web components with a React-like syntax

Generates and validates Atomico.js web components using a simple React-style syntax with hooks, props, and Shadow DOM. Eliminates verbose class boilerplate, manual event wiring, and tricky TypeScript typing errors in custom elements. Guides your AI agent through coding standards, API references, and a built-in validation pipeline so every component compiles cleanly.

1,278|44

↗

npx skills add atomicojs/atomico --all -g -y

All Skills in This Repository (14)

Pure Emerald Level Indicators

📦 In Repo

atomicojs

atomico-hooks-dom

Observe slotted nodes and light DOM children in Atomico components.

atomico-css-styling

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

atomico-hooks-forms

Implement form-associated hooks for Atomico web components.

atomico-hooks-props

Provide bidirectional reactive access to Atomico component properties.

atomico-component

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

atomico-hooks-core

Provide core Atomico hooks for state, memoization, refs, and updates.

atomico-hooks-async

Generate dynamic PDFs with customizable layouts and formats for your application's needs.

atomico-hooks-events

Dispatch and listen to typed DOM and custom events in Atomico components.

atomico-jsx-patterns

Guide JSX patterns for type-safe Atomico web components.

atomico-context

Create and consume cross-shadow-DOM contexts for Atomico web components.

atomico-hooks-effects

Coordinate Atomico hook side effects across web component lifecycle callbacks.

atomico-app-patterns

Manage Atomico component state and events with composition and context.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install Atomico?▼

Run `npx skills add atomicojs/atomico --all -g -y` in your terminal to install all skills in this suite globally.

What is Atomico used for?▼

Atomico is a tiny library for building standard web components with a React-like syntax, so your components work in React, Vue, Svelte, or plain HTML.

How is Atomico different from React?▼

Atomico produces native web components instead of framework-specific code, and it is roughly 60% faster than React with a much smaller bundle size.

Does Atomico work with AI coding agents?▼

Yes. The included SKILL.md gives your AI agent coding standards, API references, and a validation checklist for generating correct Atomico components.

Do I need to know TypeScript to use Atomico?▼

No. Atomico infers prop types automatically, and the skill guides your agent to write fully typed components for you.