# Datastar

> Build reactive hypermedia web applications with backend-driven UI updates. 10.7KB framework combining HTMX-style backend reactivity with Alpine.js-style frontend reactivity.

- **Type:** Skill
- **Install:** `agentstack add skill-marcindudekdev-claude-skill-datastar-datastar`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [MarcinDudekDev](https://agentstack.voostack.com/s/marcindudekdev)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [MarcinDudekDev](https://github.com/MarcinDudekDev)
- **Source:** https://github.com/MarcinDudekDev/claude-skill-datastar/tree/main/datastar

## Install

```sh
agentstack add skill-marcindudekdev-claude-skill-datastar-datastar
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# DataStar

Build reactive web applications with server-driven updates and declarative HTML attributes.

> **⛔ MANDATORY — NO FABRICATION:** Before writing ANY DataStar code or explaining ANY DataStar attribute/action/event, you MUST consult the bundled `references/` and `modules/` files first. Do NOT generate syntax from memory — it will be wrong.
>
> **Required workflow for every DataStar question:**
> 1. `Grep ""` across this skill's `references/` and `modules/` directories to locate the relevant file.
> 2. `Read` that file to get exact syntax.
> 3. Quote it directly.
> 4. If the answer is not in the bundled files, fetch the official docs at https://data-star.dev before answering.
>
> If nothing is found → say "Not found in DataStar references" and stop. **Never invent syntax.**

## Quick Start

```html

```

**Signal naming:** camelCase is the default and recommended convention. Hyphenated HTML attributes auto-convert to camelCase. Use `__case.snake` to opt into snake_case.

## Core Concepts

### Signals (State)
```html

    
    
    

```

### Actions (Backend Requests)
```html
Load
Save
```

### Backend Responses (SSE)
```
event: datastar-patch-elements
data: elements Content

event: datastar-patch-signals
data: signals {count: 5}
```

## Knowledge Modules

| Module | Description |
|--------|-------------|
| `modules/tao.md` | The Tao of Datastar - 14 core principles from the team |
| `modules/gotchas.md` | Critical pitfalls with fixes |
| `modules/core.md` | Architecture, signals, actions |
| `modules/best-practices.md` | Naming, performance, security |
| `modules/debugging.md` | Common errors and solutions |

## Reference Files

| Reference | Description |
|-----------|-------------|
| `references/attributes.md` | All data-* attributes |
| `references/actions.md` | All @ actions |
| `references/patterns.md` | UI patterns (forms, lists, etc.) |
| `references/sse-events.md` | SSE protocol, SDK examples |

## Examples

| Example | Description |
|---------|-------------|
| `examples/realtime-counter.html` | Simplest reactive example |
| `examples/form-validation.html` | Form with client-side validation |
| `examples/dynamic-list.html` | Add/remove items via SSE |
| `examples/todo-app.html` | Complete todo application |
| `examples/wp-sse-endpoint.php` | WordPress SSE handler |

## The Tao of Datastar (Philosophy)

14 official principles from the core team. Key takeaways:
- **Backend is source of truth** - state lives on server, not client
- **Patch, don't poll** - backend drives frontend via SSE patches
- **Signals are sparse** - only for UI toggles + form binding
- **Fat morph** - send large DOM chunks, let morphing handle diffs
- **CQRS** - one long-lived GET for reads, short POSTs for writes
- **No optimistic updates** - never fake success, use loading indicators
- **No client-side routing** - use `` tags and View Transition API

See `modules/tao.md` for all 14 principles with code examples.

## Top 5 Gotchas

1. **camelCase signals** (default) - `playerName` not `player_name` (snake_case opt-in via `__case.snake`)
2. **Server is source of truth** - No localStorage for state
3. **Missing IDs** - Elements need `id=` for morphing
4. **FOUC prevention** - Add `style="display:none"` to data-show
5. **PHP output buffering** - Disable with `ob_end_clean()` for SSE

See `modules/gotchas.md` for the full list.

Block-form statements (`if (…) { … }`, `for { }`, `try { }`) in `data-on-*` / `data-effect`
break the expression parser — half the page works, the rest silently fails to mount.
Use ternary `?:` or delegate to `window.fn()`.

## When to Use DataStar

**Good fit:** Server-rendered apps, real-time dashboards, forms, CRUD apps, multi-step workflows

**Not ideal:** Offline-first apps, heavy client computation, complex routing, gaming

## Official Resources

- **Docs:** https://data-star.dev
- **GitHub:** https://github.com/starfederation/datastar
- **Version:** 1.0.0 (released 2026-04-16)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MarcinDudekDev](https://github.com/MarcinDudekDev)
- **Source:** [MarcinDudekDev/claude-skill-datastar](https://github.com/MarcinDudekDev/claude-skill-datastar)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-marcindudekdev-claude-skill-datastar-datastar
- Seller: https://agentstack.voostack.com/s/marcindudekdev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.