skills.rest
oncokb
oncokbOFFICIAL
Explore all skills by this author →
Website𝕏@OncoKBGitHub

oncokb-datastar

Build and review Datastar HTML interactions using correct data attributes, modifiers, and expression patterns.

Updated Aug 31, 2026
Search Tags:#code review#html#frontend#signals#hypermedia#data-attributes#datastar
One-click install
npx skills add https://github.com/oncokb/oncokb-skills --skill oncokb-datastar-oncokb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: oncokb-datastar
Source: https://github.com/oncokb/oncokb-skills/tree/main/skills/oncokb-datastar
Command: npx skills add https://github.com/oncokb/oncokb-skills --skill oncokb-datastar-oncokb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Datastar-based UI interactions requires precise knowledge of data-* attribute semantics, modifier syntax, and evaluation ordering, and mistakes like malformed data-on:* keys or accidental Pro-only attribute usage cause subtle runtime defects. ## Core Features & Use Cases - Attribute Mapping: Translates intended UI behavior (signals, events, visibility toggles, side effects) into canonical Datastar attributes like data-bind, data-computed, data-effect, and data-on:*. - Syntax and Ordering Validation: Checks casing rules, modifier usage (__case, __delay, __debounce, __throttle), and order-sensitive attribute sequencing on elements. - Free vs Pro Compatibility Checks: Flags Pro-only attributes and actions (e.g., data-persist, @clipboard) when the project lacks a Datastar Pro license. - Use Case: When adding a debounced live search to an HTML template, use this Skill to produce correct markup such as data-bind:search combined with data-on:input__debounce.200ms="@get('/search')" and verify it against the official attribute reference. ## Quick Start Ask the assistant to review or implement the Datastar attributes in your HTML template using the oncokb-datastar skill.

Frequently Asked Questions about oncokb-datastar

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

FAQPage Schema
How do I add a debounced search input with Datastar?▼

Use data-bind to store the input value in a signal and data-on:input__debounce.200ms with @get to send the request. This pattern avoids firing a backend request on every keystroke and applies server-rendered updates declaratively.

What is the difference between data-computed and data-effect in Datastar?▼

data-computed declares read-only derived signals from other signals, while data-effect runs side effects when dependent signals change. Use data-computed for derivations and reserve data-effect for mutations or external side effects.

Which Datastar attributes require a Pro license?▼

Pro-only attributes include data-animate, data-persist, data-query-string, data-replace-url, data-match-media, data-on-resize, and data-scroll-into-view, plus actions like @clipboard, @fit, and @intl. Avoid these in OSS-only projects without a Datastar Pro license.

Why is my Datastar attribute not working as expected?▼

Common causes include malformed data-on:* keys, invalid modifier suffixes, incorrect casing without __case, and order-sensitive attributes sequenced incorrectly on the same element. Datastar evaluates attributes depth-first in the DOM, then in attribute order per element.

How do Datastar backend actions handle request cancellation?▼

By default, in-flight requests with the same method and URL are auto-cancelled by newer ones. You can override this with the requestCancellation option set to auto, cleanup, disabled, or a manual AbortController for explicit cancellation control.

Related Skills

Explore More Software Engineering Skills→
romsharkromshark
82

datastar

Bind UI elements to server-driven signals using data-* attributes.

Community
Basic
cbeauhiltoncbeauhilton

data-cultist

Patch DOM elements and signals from a backend using Datastar.

Community
Advanced
maragudkmaragudk
27

datastar

Build server-driven reactive frontends for Go web apps with SSE updates.

Official
Advanced
mefardalesmefardales

alpine-js

Implement reactive behavior in server-rendered HTML with Alpine.js directives and stores.

Community
Intermediate