skills.rest
yw662
yw662COMMUNITY
Explore all skills by this author →
WebsiteGitHub

signal-binding

Bind reactive signal values into DOM text, attributes, and template slots.

6|1|Updated May 31, 2026
Search Tags:#template#reactivity#signal#dom#binding#computed
One-click install
npx skills add https://github.com/yw662/rikka --skill signal-binding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: signal-binding
Source: https://github.com/yw662/rikka/tree/main/skills/signal-binding
Command: npx skills add https://github.com/yw662/rikka --skill signal-binding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you bind reactive signal state into the DOM without accidentally freezing updates into static values. It explains how to keep text, attributes, and template output live while choosing the right level of reactivity for each situation.

Core Features & Use Cases

  • Text and Children Binding: Pass signals directly into DOM children so text updates stay fine-grained and do not re-render surrounding structure.
  • Attribute Binding: Bind signals into style, class, and other attributes so UI state changes propagate automatically and predictably.
  • Function Children and Computed Values: Use function children or computed values when the structure itself needs to change, such as conditional layouts or swapped components.
  • Custom Element Rendering: Choose between raw attribute values and reactive accessors inside defineElement render logic based on whether you want coarse-grained logic or fine-grained DOM updates.
  • Use Case: A counter, theme switcher, or conditional panel can stay responsive without manual DOM updates, as long as reactive values are passed in the correct form.

Quick Start

Use the signal-binding skill to determine whether a value should be passed as a signal, a computed result, or a function child so the DOM remains reactive.

Frequently Asked Questions about signal-binding

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

FAQPage Schema
How do I bind reactive signal values to DOM text without losing fine-grained updates?▼

To keep DOM text bindings live and fine-grained, pass the signal itself directly into children rather than calling .get(), which freezes the value into a static string and stops reactive updates.

When should I use computed values or function children for DOM binding?▼

Use computed values or function children for DOM binding when the DOM structure itself needs to change, such as rendering conditional layouts or swapping components, rather than for simple text or attribute updates.

Why do my reactive DOM updates turn static when passing signal values?▼

Reactive DOM updates turn static when you call .get() on the signal before passing it, which evaluates and freezes the current value instead of preserving the live signal binding for automatic reactivity.

Can I bind signals to style and class attributes for automatic UI updates?▼

Yes, you can bind signals directly into style, class, and other attributes so UI state changes propagate automatically and predictably without requiring manual DOM updates.

What's the best way to handle reactive attribute binding inside custom element render logic?▼

Inside defineElement render logic, choose between raw attribute values for coarse-grained rendering logic and reactive accessors for fine-grained DOM updates based on your desired level of update granularity.

Related Skills

Explore More Software Engineering Skills→
wilfriedagowilfriedago
2

angular-signals

Explain and demonstrate Angular signal-based reactive state management primitives.

Community
Intermediate
HallinnaHallinna

render-props-pattern

Implement React component composition using render props to share stateful logic.

Community
Basic
yw662yw662
6

rikka

Build reactive web components with TC39 Signals and native custom elements.

Community
Advanced
zard-uizard-ui
1.1k

angular-signals

Create Angular signals for state, derived state, and side effects.

Official
Advanced