--- name: nojs metadata: version: 1.14.1 description: Provides expert-level knowledge of the No.JS HTML-first reactive framework for building dynamic web applications using only HTML attributes. Activates when the user mentions No.JS, NoJS, "no javascript framework", HTML-first framework, or is writing HTML with reactive attributes like bind, state, get, foreach, each, for, on:click, model, route, store, computed, watch, if/else, show/hide, validate, animate, drag, drop, t (i18n), class-*, style-*, or bind-*. Also relevant when the user asks about declarative HTML frameworks, zero-JS frameworks, or wants to build a web app without writing JavaScript. Applies whenever HTML attributes match No.JS directive patterns, even without explicit mention of the framework. --- # NoJS-Skill No.JS is an HTML-first reactive framework with zero dependencies that replaces JavaScript with declarative HTML attributes. CSP-compliant via a custom expression parser (no eval). Include one ` ``` No `app.mount()`, no `createApp()`, no build step. It just works. ## Project context Project configuration: `cat nojs.config.json 2>/dev/null || echo 'No nojs.config.json found'` HTML files in the project: `find . -name '*.html' -maxdepth 2 -not -path '*/node_modules/*' | head -10` Files using NoJS: `grep -l 'cdn.no-js.dev\|@erickxavier/no-js' package.json *.html 2>/dev/null | head -5` ## When to use This skill applies when: - The user mentions **No.JS**, **NoJS**, or the **HTML-first reactive framework** - The user is writing HTML with No.JS directive attributes (`bind`, `state`, `get`, `foreach`, `each`, `for`, `on:click`, `model`, `route`, `store`, `validate`, `animate`, `drag`, `drop`, `t`, `class-*`, `style-*`, `bind-*`) - The user asks about **declarative HTML frameworks** or wants to build a **web app without writing JavaScript** - The user needs to **scaffold**, **validate**, or **debug** No.JS templates - HTML attributes match No.JS directive patterns, even without explicit mention of the framework ## Instructions ### 1. Understand the framework architecture No.JS works by walking the DOM on `DOMContentLoaded`, matching HTML attributes to directives, and executing them by priority: | Priority | Directives | Purpose | |----------|-----------|---------| | 0 | `state`, `store` | Initialize reactive data first | | 1 | `get`, `post`, `put`, `patch`, `delete`, `error-boundary`, `i18n-ns`, `page-title`, `page-description`, `page-canonical`, `page-jsonld` | Fetch data, error/i18n setup, head management | | 2 | `computed`, `watch` | Derive values and observe changes | | 5 | `ref` | Element references | | 10 | `if`, `else-if`, `else`, `switch`, `foreach`, `each`, `for`, `use`, `drag-list`* | Structural (add/remove DOM) | | 15 | `animate`, `drag`*, `drop`* | Animation and drag-and-drop setup | | 16 | `drag-multiple`* | Multi-select drag | | 20 | `bind`, `bind-*`, `bind-html`, `model`, `class-*`, `style-*`, `on:*`, `show`, `hide`, `t`, `call`, `trigger` | Rendering, events, i18n, actions | | 30 | `validate`* | Form validation side effects | > \* As of v1.13.0, `drag`, `drop`, `drag-list`, `drag-multiple`, and `validate` require the `@erickxavier/nojs-elements` plugin. Install it and call `NoJS.use(NoJSElements)` to enable them. The `error-boundary` directive and `NoJS.validator()` remain in core. Data lives in Proxy-backed reactive contexts that inherit from parent elements (like lexical scoping). When data changes, every bound element updates automatically. ### 2. Know the directive categories Directives are organized into eight categories. Each summary below provides enough context to decide when to consult the full reference. **Data Fetching** -- `get`, `post`, `put`, `patch`, `delete` with `as`, `loading`, `error`, `empty`, `success`, `refresh`, `cached`, `skeleton`, `debounce`, `headers`, `params`, `get-trigger`, `get-insert`, `get-page`, `get-cursor`, `get-cursor-field`, `get-threshold`. URLs support interpolation (`/users/{userId}`). Pagination via `get-trigger="scroll"` + `get-insert="append"` + `get-page` or `get-cursor`. See [references/directives/data-fetching.md](references/directives/data-fetching.md). **State and Binding** -- `state` (local), `store` (global via `$store`), `computed`, `watch`, `persist`/`persist-key`/`persist-fields`. Binding: `bind` (text), `bind-html` (sanitized), `bind-*` (attributes), `model` (two-way). See [references/directives/state-and-binding.md](references/directives/state-and-binding.md). **Control Flow** -- `if`/`else-if`/`else`, `show`/`hide` (CSS toggle), `switch`/`case`/`default`. Loops: `foreach`/`each`/`for` (aliases, same handler) -- self-repeating pattern where the element with the directive IS the repeating template (removed from DOM, clones inserted as siblings between comment markers). Companion attributes: `filter`, `sort`, `limit`, `offset`, `key`, `template`, `index`, `else`. Empty-list fallback via companion `else="templateId"` attribute -- renders when the list is empty or null/undefined/non-array (sibling else pattern removed — Unreleased). Loop vars: `$index`, `$count`, `$first`, `$last`, `$even`, `$odd`. See [references/directives/control-flow.md](references/directives/control-flow.md). **Events** -- `on:click="expr"` with modifiers (`.prevent`, `.stop`, `.once`, `.debounce.300`, `.throttle.100`). Key mods, lifecycle hooks (`on:init`, `on:mounted`, `on:updated`, `on:unmounted`, `on:error`). Vars: `$event`, `$el`. See [references/directives/events.md](references/directives/events.md). **Routing** -- ``, `