kerf-applisted

# Building apps with kerf > Drop this file into your `~/.claude/skills/kerf-app/SKILL.md` (or your > project's `.claude/skills/kerf-app/SKILL.md`) so Claude Code activates > it whenever you work on a kerf app. kerf is a ~11 KB reactive UI framework (~12 KB with `arraySignal`): signals + DOM morphing + JSX → HTML strings. No virtual DOM, no compiler, no scheduler. The whole public surface fits in 15 exports. ## Setup - Install: `npm install kerfjs` - `tsconfig.json`: `"jsx": "react-jsx"`, `"jsxImportSource": "kerfjs"` - Vite / esbuild need no extra config. - Recommended companion: `npm install --save-dev eslint-plugin-kerfjs` and add `kerfjs.configs.recommended` to the project's eslint config. Enforces five of the hard rules below (no inline JSX event handlers, require `data-key` in `each()`, capture `delegate()` disposers, no nested `mount()`, prefer module JSX augmentation) at edit time — useful as a self-correction signal when authoring kerf code. ## Public API — one import path ```ts import { signal, computed, effect, batch, // reactivity defineStore, resetAllStores, // stores mount, morph, each, // render (reactive + one-shot) + keyed list delegate, delegateCapture, // events toElement, // direct JSX → DOM Element (or DocumentFragment for multi-root) SafeHtml, isSafeHtml, raw, Fragment, } from 'kerfjs'; // Optional, only when you need granular collection updates: import { arraySignal } from 'ke