Create declarative custom element templates with reactive text, attribute, and event bindings.
npx skills add https://github.com/yw662/rikka --skill template-binding
Please help me install this Agent Skill. Skill: template-binding Source: https://github.com/yw662/rikka/tree/main/skills/template-binding Command: npx skills add https://github.com/yw662/rikka --skill template-binding
This Skill helps you write declarative custom element templates without manually composing every node in render logic, so you can keep markup readable while still getting reactive updates and typed events.
Use this skill to turn a defineElement custom element into a template-driven component with {{name}} bindings and {{@event}} event dispatch.
High-intent search queries and answers about installing and using this skill.
Reactive text and attribute bindings in custom element templates are achieved by writing declarative HTML markup with {{name}} interpolation. This resolves declared attributes automatically, keeping your web components readable without programmatic render functions.
Dispatching custom events from HTML template markup uses the {{@event}} binding syntax. You must provide matching event keys in your component's events configuration to trigger the custom event dispatch correctly from within the template.
Declarative template bindings are designed to replace manual programmatic render functions by relying on HTMLTemplateElement markup and slots. This provides stable structure and strong TypeScript inference instead of manual node composition.
Setting up template binding requires HTMLTemplateElement templates produced by an h function, declared attributes for {{name}} resolution, and matching events keys for {{@event}} dispatch within your defineElement components.
Use declarative template bindings when building compact web components, form controls, or UI pieces that need stable structure. It keeps markup readable while delivering reactive updates and typed events without manually composing every node.
yw662Bind reactive signal values into DOM text, attributes, and template slots.
IgniteUIProvide UI components for Angular applications with reactive forms support.
gil00pitaDefine and register framework-agnostic web components using Custom Elements and Shadow DOM.
PatternsDevBuild Vue components programmatically using render functions and JSX.
