본문으로 건너뛰기
cccskills
무료GitHub에 공개

trigger-realtime-and-frontend

Trigger.dev client/frontend surface: subscribe to runs in realtime (runs.subscribeToRun and the @trigger.dev/react-hooks hook useRealtimeRun), consume metadata and AI/text streams in React (useRealtimeStream), trigger tasks from the browser (useTaskTrigger, useRealtimeTaskTrigger), and mint scoped frontend credentials with auth.createPublicToken / auth.createTriggerPublicToken. Load when wiring a frontend (React/Next.js/Remix) or backend-for-frontend to show live run progress, status badges, token streams, trigger buttons, or wait-token approval UIs. NOT for writing the backend task itself (streams.define / metadata.set is trigger-authoring-tasks territory); this is the consumer side.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Realtime and Frontend

The full, version-pinned reference ships inside your installed @trigger.dev/sdk. Read it before writing code — it always matches the SDK version in this project, so it never drifts:

  • Skill: node_modules/@trigger.dev/sdk/skills/trigger-realtime-and-frontend/SKILL.md — run subscriptions, @trigger.dev/react-hooks, streams, frontend triggering, and scoped tokens.
  • Docs: the full, version-pinned docs ship bundled at node_modules/@trigger.dev/sdk/docs/realtime/; the skill above lists the exact pages it draws from in its sources: frontmatter. Grep for a hook, e.g. grep -rl "useRealtimeRun" node_modules/@trigger.dev/sdk/docs/.

If those paths don't exist, @trigger.dev/sdk isn't installed yet — install it first. In a non-hoisted layout, resolve the package with node -p "require.resolve('@trigger.dev/sdk/package.json')" and read skills/ + docs/ beside it.

Common mistakes

  1. CRITICAL: Triggering from the browser with a Public Access Token. The read token from createPublicToken cannot trigger tasks.

    • Wrong: useTaskTrigger("my-task", { accessToken: publicAccessTokenFromCreatePublicToken })
    • Correct: mint a single-use Trigger Token with auth.createTriggerPublicToken("my-task") and pass that.
  2. Token with no scopes. A scopeless token authorizes nothing, so every subscribe 403s.

    • Wrong: await auth.createPublicToken()
    • Correct: await auth.createPublicToken({ scopes: { read: { runs: ["run_1234"] } } })
  3. Polling with useRun/SWR for live updates. useRun is the SWR-based management-API hook (not recommended for live state); set refreshInterval: 0 to stop polling if you do use it.

    • Wrong: useRun(runId, { refreshInterval: 1000 }) to track progress
    • Correct: useRealtimeRun(runId, { accessToken }) (no polling, no WebSocket setup)
  4. Forgetting "use client". Realtime/trigger hooks cannot run in a server component.

    • Wrong: a Next.js App Router server component using useRealtimeRun
    • Correct: put "use client"; at the top of any component using these hooks.
  5. Shipping payload/output you do not render.

    • Wrong: useRealtimeRun(runId, { accessToken }) for a status badge (large payloads over the wire)
    • Correct: useRealtimeRun(runId, { accessToken, skipColumns: ["payload", "output"] })
  6. Subscribing before the handle exists.

    • Wrong: useRealtimeRun(handle, { accessToken: handle?.publicAccessToken }) with no guard
    • Correct: add enabled: !!handle so it subscribes only once the trigger returns a handle.

References

Sibling skills: trigger-authoring-tasks (the task side: streams.define(), metadata.set(), wait.createToken), trigger-authoring-chat-agent and trigger-chat-agent-advanced (chat agents build on these realtime streams).

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

clerk

무료

Clerk authentication router. Use when user asks about Clerk CLI operations, adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments, pricing, plans, seat-based pricing, feature entitlements, syncing users, or testing. Automatically routes to the specific skill based on their task.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

Clerk Backend REST API explorer and executor. Browse tags, inspect endpoint schemas, and execute authenticated requests. Use when listing users, managing organizations, or calling any Clerk API endpoint.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

Clerk Billing for subscription management - render Clerk's PricingTable and in-app checkout drawer, configure subscription plans, seat-limit plans for B2B, feature entitlements with has(), and billing webhooks. Use for SaaS monetization, plan gating, checkout flows, trials, invoicing, and subscription lifecycle management.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

clerk-cli

무료

Operate the Clerk CLI (`clerk` binary) for authentication, user/org/session management, deploy verification, instance config, env keys, and any Clerk Backend or Platform API call. Use when the user mentions Clerk management tasks, "list clerk users", "create a clerk user", "update organization", "pull clerk config", "clerk env pull", "clerk doctor", "clerk deploy", "clerk deploy status", "clerk api", or any ad-hoc Clerk API request. Prefer the CLI over raw HTTP: it handles auth, key resolution, app/instance targeting, and formatting automatically.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-with-antonio/browser-automation-app892026년 7월 18일 업데이트

code-with-antonio의 스킬 모두 보기

이 스킬의 문제 신고