# trigger-realtime

A skill to subscribe to Trigger.dev task runs from the browser, render progress and data streams in React, and fire tasks with scoped tokens. Use it to wire live status badges, progress bars, or approval forms into your UI.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 installs · ★ 35
- Author: triggerdotdev
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/triggerdotdev/skills/tree/HEAD/trigger-realtime/SKILL.md
- Updated: 2026-10-19
- HTML: https://affpapa.org/en/nevibecode/skills/trigger-realtime

## What it does

trigger-realtime is the frontend layer of Trigger.dev. It provides React hooks to subscribe to a running task's status, read data streams (text, AI responses), send data back into a task, and fire tasks from the browser. The primary hook, `useRealtimeRun`, subscribes to a task by ID and returns its status, metadata, and errors. Additional hooks cover firing tasks from a button (`useTaskTrigger`), combining trigger and subscribe in one (`useRealtimeTaskTrigger`), and reading streams separately (`useRealtimeStream`).

All hooks come from `@trigger.dev/react-hooks` and work with Next.js, Remix, and plain React. Before using them, mint a scoped token on the backend with `auth.createPublicToken` (read-only) or `auth.createTriggerPublicToken` (for firing), pass it to the frontend, and pass it to the hook as `accessToken`. Tokens expire after 15 minutes by default.

This skill is for the frontend only; defining tasks and streams (streams.define, metadata.set) is trigger-tasks territory. If you only need the status without the payload, skip columns with `skipColumns: ["payload", "output"]` to reduce bandwidth.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add triggerdotdev/skills --skill trigger-realtime -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/trigger-realtime/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/trigger-realtime/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add triggerdotdev/skills --skill trigger-realtime -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/trigger-realtime/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add triggerdotdev/skills --skill trigger-realtime -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/trigger-realtime/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install triggerdotdev/skills trigger-realtime
```

2. **Manually: put the files in place**
- File: `.github/skills/trigger-realtime/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add triggerdotdev/skills --skill trigger-realtime -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/triggerdotdev/skills --path trigger-realtime
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/trigger-realtime/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add triggerdotdev/skills --skill trigger-realtime -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/triggerdotdev/skills/tree/HEAD/trigger-realtime/SKILL.md

## When to use it
- display live task progress in your UI without polling
- render a status badge or progress bar that updates in real time
- trigger a task from a browser button
- consume and display a text or AI stream in a React component
- send user input back into a running task

## Example prompts
- Show the progress of task run_1234 with accessToken in a status component
- Create a button that fires task my-task from the browser with parameters { foo: "bar" }
- Render the stream from key ai-output into a component with task ID runId and accessToken

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [triggerdotdev/skills](https://affpapa.org/en/nevibecode/by/triggerdotdev/skills.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md