How does this skill handle state management?

It enforces a strict authority split: UI authority fields use local expressions, while App authority fields are updated exclusively via SSE mappings (datastar-patch-signals).

Datastar is a lightweight hypermedia framework that uses HTML attributes and Server-Sent Events (SSE) to create real-time, reactive web interfaces without the complexity of heavy SPA frameworks.

When should I use SSE versus local UI signals?

Presentation and session interactions default to UI-local signals, while application-level interactions require backend commands and SSE convergence.

Does this skill help with UI components like tabs?

Yes, it provides guidance on using shared local controllers (like Surreal) for presentation-only tabs versus using Datastar signals for more complex component contracts.

Datastar Interaction Patterns

Name: Datastar Interaction Patterns
Author: eboody

byeboody

0•

设计工具

Implements standardized Datastar hypermedia patterns for state management, signal bindings, and Server-Sent Events (SSE).

This skill provides specialized guidance for building hypermedia-driven interfaces using the Datastar framework. It enforces a clear separation between UI-local state and backend-authoritative state, ensuring that Server-Sent Events (SSE) and local signal bindings follow consistent architectural patterns. By applying specific rules for component composition, tab management, and signal convergence, it helps developers build responsive, real-time web applications with predictable data flow and minimal frontend complexity while maintaining high standards for code organization.

主要功能

01Enforces state authority split between UI-local and app-level fields

02Facilitates namespace-style component organization for scalable codebases

03Provides optimized patterns for tabbed UI composition and shared controllers

04Standardizes Datastar signal, attribute, and expression usage across projects

050 GitHub stars

06Manages Server-Sent Events (SSE) patch patterns for backend state updates

使用场景

01Building tabbed interfaces with shared local controllers or Datastar signals

02Designing complex frontend state management without heavy JavaScript frameworks

03Implementing real-time UI updates via SSE convergence and patch-signals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eboody/eran.codes mds-datastar-patterns

For use in Claude.ai and ChatGPT

主要功能

01Enforces state authority split between UI-local and app-level fields

02Facilitates namespace-style component organization for scalable codebases

03Provides optimized patterns for tabbed UI composition and shared controllers

04Standardizes Datastar signal, attribute, and expression usage across projects

050 GitHub stars

06Manages Server-Sent Events (SSE) patch patterns for backend state updates

使用场景

01Building tabbed interfaces with shared local controllers or Datastar signals

02Designing complex frontend state management without heavy JavaScript frameworks

03Implementing real-time UI updates via SSE convergence and patch-signals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eboody/eran.codes mds-datastar-patterns

For use in Claude.ai and ChatGPT