skills.rest
PMN123
PMN123COMMUNITY
Explore all skills by this author →
GitHub

jac-cl-components

Write client-side Jac UI components with reactive state, JSX rendering, and typed event handlers.

Updated Jul 26, 2026
Search Tags:#frontend#react#jsx#event handlers#client components#reactive state#jac
One-click install
npx skills add https://github.com/PMN123/trapdoor --skill jac-cl-components-pmn123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jac-cl-components
Source: https://github.com/PMN123/trapdoor/tree/main/.agents/skills/jac-cl-components
Command: npx skills add https://github.com/PMN123/trapdoor --skill jac-cl-components-pmn123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing client-side UI in Jac requires unlearning React and JavaScript habits, and mistakes like in-place state mutation, misplaced hooks, or wrong event typing cause silent runtime bugs that the compiler does not catch. This Skill provides the exact Jac syntax and pitfall guidance for building components that compile correctly to React. ## Core Features & Use Cases - Component authoring patterns: Defines components as def:pub functions returning JsxElement, with has fields for reactive state, can with entry mount effects, and typed props including Callable callbacks and children. - JSX statement slots and control flow: Covers expression slots, for/if statement slots for iteration and conditional rendering, dynamic tags, and JSX comment syntax. - Pitfall prevention: Documents silent runtime bugs such as in-place mutation not re-rendering, stale state in async loops, hooks after conditional returns, and undefined vs None checks on hook values. - Use Case: When adding a new interactive page to a Jac fullstack app, load this Skill to write the component with correct state handling, server RPC calls via sv import, and event handlers typed with ambient DOM events. ## Quick Start Write a Jac client component for a counter with an input field, using has state, a mount effect, and typed click and change event handlers.

Frequently Asked Questions about jac-cl-components

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

FAQPage Schema
How do I write a client component in Jac instead of React?▼

Define a component as def:pub name() -> JsxElement with has fields for state and return JSX directly. State updates use plain assignment like count = count + 1, which re-renders without any setState call, and mount effects use async can with entry blocks.

How do I declare reactive state in a Jac client component?▼

Declare state with has fields at component scope, such as has count: int = 0, which compiles to React useState. Assign new values directly to trigger re-renders, but never mutate in place since appends or item assignment will not update the UI.

Why is my Jac component not re-rendering after updating a list?▼

In-place mutation like todos.append(x) or todos[0] = y does not re-render because React only detects new value assignments. Rebind a fresh value instead, for example todos = todos + [x], so the state reference changes.

Can I use useState and useEffect from React in Jac client code?▼

Jac provides idiomatic replacements: has fields replace useState and can with entry blocks replace useEffect. Aliases exist but are discouraged, and JsxElement plus DOM event types are built-in and must never be imported.

How do I pass callback props to a Jac component?▼

Type callback props with Callable, for example onDelete: Callable[[str], None], and pass them as JSX attributes from the caller. For optional callbacks use Callable[[str], None] | None and guard the invocation with an if check.

Why does my Jac async handler read stale state values?▼

After an await, reading a has field returns the render-time snapshot, not the latest write. Accumulate results into a local variable inside the loop and assign the full value to the has field on each iteration.

Related Skills

Explore More Software Engineering Skills→
nihalnihalaninihalnihalani

jac-codespaces

Explains how the Jac compiler infers client, server, and native code placement.

Community
Intermediate
partme-aipartme-ai
610

vue-router

Configure routes, navigation guards, and programmatic navigation in Vue.js applications.

Official
Intermediate
nihalnihalaninihalnihalani

jac-cl-styling

Implements Tailwind v4 setup, conditional classes, cn() utility, and scoped CSS for Jac client components.

Community
Intermediate
nihalnihalaninihalnihalani

jac-cl-components

Write client-side Jac UI components with reactive state, JSX rendering, and typed event handlers.

Community
Advanced