kerf-app

Build kerf reactive UIs in TypeScript/JSX with mounts, morphs, stores, and delegated events.

1|Updated May 7, 2026

Search Tags:#reactive ui #kerfjs #jsx to html #dom morphing #signal state #event delegation #keyed lists

Ready to run

npx skills add https://github.com/brianwestphal/kerf --skill kerf-app

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you implement and debug user interfaces in the kerf reactive framework so your app updates efficiently without virtual DOM overhead.

Core Features & Use Cases

Kerf app setup guidance: JSX → HTML strings configuration, recommended tooling, and how to structure kerf projects.
Correct reactive patterns: where to read signals for tracking, how to use stores and actions, and when to use computed/effect/batch.
Reliable DOM updates: using mount, morph, keyed each(), and safe event handling with delegate()/delegateCapture() to avoid broken rerenders, lost focus, and leaky listeners.
Practical UI implementation support: event delegation patterns, SSR/DOM requirements, and diagnostics for common runtime/type errors.

Quick Start

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."

Frequently Asked Questions about kerf-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I update reactive UI state without a virtual DOM?▼

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.

How do I render keyed lists reactively without breaking rerenders?▼

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.

What is the safest way to handle DOM events in a reactive UI framework?▼

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.

Can I use TypeScript and JSX to build reactive UIs that compile to HTML strings?▼

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.

Why does my reactive UI lose focus or fail to update correctly during morphing?▼

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.

When should I batch signal updates or use computed values in a reactive app?▼

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.