# Total.js jComponent AI kit

> Rules, a template and tools so an AI model can create Total.js jComponents (UI components for the Total.js UI library v20) from a natural-language description (or convert existing ones), in a single-file format: component.html (CSS + script + live example, runs in the browser), readme.md and preview.jpg.

Plain JavaScript (ES5 style), no TypeScript. Library: https://cdn.componentator.com/spa.min@20.js. Catalogue: https://componentator.com.

## Start here

- [AGENTS.md](https://raw.githubusercontent.com/totaljs/components/master/AGENTS.md): What this repository is and how to use it
- [SKILL.md](https://raw.githubusercontent.com/totaljs/components/master/SKILL.md): Workflow, rules and checklist to create a component
- [Template: component.html](https://raw.githubusercontent.com/totaljs/components/master/example/component.html): The reference component
- [Template: readme.md](https://raw.githubusercontent.com/totaljs/components/master/example/readme.md): The reference readme with the frontmatter

## Reference

- [API](https://raw.githubusercontent.com/totaljs/components/master/docs/api.md): Methods of the library and what a component can implement
- [AI context: component development](https://raw.githubusercontent.com/totaljs/components/master/docs/aicontext/component-development.md): How to turn a description into a component, hooks, data flow and verification
- [AI context: ui-component](https://raw.githubusercontent.com/totaljs/components/master/docs/aicontext/ui-component.md): How to initialize a component in HTML (name, path, config, default, special keys)
- [AI context: ui-bind](https://raw.githubusercontent.com/totaljs/components/master/docs/aicontext/ui-bind.md): Data binding
- [AI context: ui-import](https://raw.githubusercontent.com/totaljs/components/master/docs/aicontext/ui-import.md): Dynamic content import
- [AI context: ui-plugin](https://raw.githubusercontent.com/totaljs/components/master/docs/aicontext/ui-plugin.md): Scoped composition
- [Documentation](https://docs.totaljs.com/components/): Total.js UI components documentation

## Optional

- [Convert tool](https://raw.githubusercontent.com/totaljs/components/master/tools/convert.js): Converts a component of the classic format (component.js, component.css, component.json, example.html...) to component.html + readme.md + preview.jpg
- [Checker](https://raw.githubusercontent.com/totaljs/components/master/tools/check.js): Checks a component folder in a browser and creates preview.jpg