refui

What problem does it solve?

This Skill helps developers quickly adopt rEFui's retained-mode with signals, enabling reactive UIs without relying on the library source. It guides you through choosing JSX modes, DOM/HTML renderers, and debugging practices when UI updates lag behind state changes.

Core Features & Use Cases

• Retained-mode mental model: understand component setup vs rendering and how signals drive incremental updates.
• JSX and renderer guidance: select automatic vs classic JSX transforms and DOM/HTML renderers for your stack.
• Directives & macros: apply on:/class:/style:/attr:/prop:/m:* patterns correctly with safe scopes.
• HMR and debugging: leverage refurbish/refui/hmr workflows and diagnose “UI not updating” problems.
• Migration patterns: map React/Vue/Solid/Svelte patterns to rEFui idioms for smoother transitions.
• Real-world example: Migrate a small React button with state to a rEFui button using signals, then compare reactivity.

Quick Start

Initialize a minimal rEFui project with automatic JSX runtime and a DOM renderer, then implement a counter component using signals.