What is the correct way to use signals in rEFui JSX?

You should use the signal directly in JSX (e.g., {count}) or wrap derived expressions in $(() => ...) or computed(). Avoid using .value directly in JSX text as it evaluates only once and won't update reactively.

How does rEFui differ from React in terms of rendering?

rEFui uses a retained-mode model where component bodies are setup functions that run only once. Unlike React, JSX is evaluated once, and signals update the UI incrementally without re-running the component logic.

Can I use rEFui for Server-Side Rendering (SSR)?

Yes, rEFui supports SSR and SSG through the HTML renderer (refui/html), allowing you to serialize components into static strings.

What are rEFui macros (m:* directives)?

Macros are reusable DOM behaviors registered on the renderer that allow you to apply complex logic or interactions to elements via simple JSX attributes.

rEFui Framework Expert

Name: rEFui Framework Expert
Author: SudoMaker

bySudoMaker

•

デザインツール

Develops high-performance UI projects using the rEFui retained-mode and signals mental model for web, native, and embedded platforms.

概要

The rEFui Framework Expert skill provides specialized guidance for building applications with rEFui, a JavaScript framework that replaces traditional VDOM re-rendering with a setup-based signal architecture. It enables Claude to correctly implement reactive state, manage DOM directives, and configure JSX runtimes without falling into common React-style pitfalls. Whether you are building browser-based apps, SSR/SSG sites, or embedded interfaces, this skill ensures optimal use of signals, effects, and lifecycle management for a performant developer experience.

主な機能

Async UI management with <Async> and <Suspense>
JSX configuration (Automatic vs. Classic runtime)
Migration patterns from React, Vue, Solid, and Svelte
Retained-mode signals architecture implementation
Reactive DOM directives and macros (on:, class:, style:)
80 GitHub stars

ユースケース

Debugging reactivity issues where UI components fail to update after signal changes
Building high-performance reactive UIs for resource-constrained embedded systems
Configuring project-specific renderers for DOM, HTML, or Reflow-only environments

概要

主な機能

Async UI management with <Async> and <Suspense>
JSX configuration (Automatic vs. Classic runtime)
Migration patterns from React, Vue, Solid, and Svelte
Retained-mode signals architecture implementation
Reactive DOM directives and macros (on:, class:, style:)
80 GitHub stars

ユースケース

Debugging reactivity issues where UI components fail to update after signal changes
Building high-performance reactive UIs for resource-constrained embedded systems
Configuring project-specific renderers for DOM, HTML, or Reflow-only environments