Build kerf reactive UIs in TypeScript/JSX with mounts, morphs, stores, and delegated events.
npx skills add https://github.com/brianwestphal/kerf --skill kerf-app
Please help me install this Agent Skill. Skill: kerf-app Source: https://github.com/brianwestphal/kerf/tree/main/ai Command: npx skills add https://github.com/brianwestphal/kerf --skill kerf-app
It helps you implement and debug user interfaces in the kerf reactive framework so your app updates efficiently without virtual DOM overhead.
mount, morph, keyed each(), and safe event handling with delegate()/delegateCapture() to avoid broken rerenders, lost focus, and leaky listeners.Tell the AI: "I’m editing a TypeScript/JSX file that imports kerfjs—add a feature that updates a list reactively and handle its click events correctly; show the required kerf patterns and fixes for any hard-rule violations you find."
High-intent search queries and answers about installing and using this skill.
You can build reactive UIs without virtual DOM overhead by using signal state tracking and DOM morphing. Signals automatically track dependencies during render, and morphing applies only the necessary DOM updates efficiently.
Render keyed lists by using the each() method with data-key attributes for stable item identity. This ensures correct DOM morphing, prevents broken rerenders, and maintains focus during reactive state updates.
Use delegate() or delegateCapture() for safe event handling instead of inline or manually added listeners. Event delegation prevents leaky listeners and ensures bindings survive DOM morphing and reactive rerenders.
Yes, you can implement reactive UIs in TypeScript and JSX configured to compile to HTML strings. This setup enables direct DOM morphing without virtual DOM overhead while maintaining type-safe component structures.
Reactive UIs lose focus or fail updates during morphing due to missing keyed identity via data-key or incorrect mount/morph semantics. Ensure proper signal tracking and avoid invalid JSX/DOM usage to maintain stable rerenders.
Use batch to group multiple signal updates into a single render pass, and use computed for derived state that caches until dependencies change. This optimizes reactive performance and prevents unnecessary DOM morphing.
bobmatnycBundle React+TypeScript apps with Tailwind and shadcn/ui into a single self-contained HTML file for Claude.
manuelbrandner85Resolve Dart static analysis errors and runtime type mismatches.
analogjsImplements signal-based reactive state management for Angular 20+ components.
atomicojsExplains Atomico's render pipeline, VNode structure, and keyed reconciliation for DOM updates.