What is temporal-playground?

A visual, node-based editor for designing Temporal workflows. Temporal is a system that runs multi-step jobs reliably through failures.

Use it to build or edit workflow diagrams, inspect existing project workflows, and generate workflow code from a visual specification.

It lets you sketch workflow steps and connections on a canvas before turning the design into implementation work.

temporal-playground — Skill for Claude Code and Codex by proyecto26: A visual, node-based editor for designing Temporal workflows.

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/proyecto26/projectx/temporal-playground

Any agent

npx skills add proyecto26/projectx --skill temporal-playground

Clone the repo

git clone --depth 1 https://github.com/proyecto26/projectx

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/proyecto26/projectx/temporal-playground.svg)](https://agentmods.dev/skills/proyecto26/projectx/temporal-playground)

Your own site

<a href="https://agentmods.dev/skills/proyecto26/projectx/temporal-playground"><img src="https://agentmods.dev/badge/skills/proyecto26/projectx/temporal-playground.svg" alt="Measured on agentmods" height="20"></a>

Per session 68 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,786 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00068	$0.01786
Opus 5	$0.00034	$0.00893
Sonnet 5	$0.00014	$0.00357
Haiku 4.5	$0.00007	$0.00179

Measured 4d ago against content hash 2574ed303955, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

temporal-playground scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

The scan reads SKILL.md. This mod also ships 24 executable files (server/src/cli.ts, server/src/server.ts, server/src/store.ts, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/temporal-playground/SKILL.md · 159 lines

How it starts

The opening of the file, as written. The whole thing — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Temporal Workflow Playground

A visual, node-based workflow designer built with React 19, React Flow 12, and Zustand. Users design Temporal workflows by dragging nodes, connecting them on a canvas, then send structured specs to Claude for implementation. Integrates with the project's existing workflows via dynamic scanning and the Temporal MCP documentation server.

Architecture

.agents/skills/temporal-playground/
  server/          # MCP server (Node.js HTTP + stdio), serves ../public/
  ui/              # Vite + React app (TypeScript, Tailwind v4)
    src/
      components/  # canvas/, chat/, palette/, spec/, layout/
      constants/   # node-types, node-defaults, handle-colors, presets
      edges/       # FlowEdge, DataEdge, WorkflowEdge
      hooks/       # useSSE, useChat, useSpec, useDragAndDrop, useWorkflowScanner
      lib/         # api, spec-generator, workflow-parser
      nodes/       # BaseNode, 10 node types (Start..End)
      store/       # workflow-store, chat-store, ui-store (Zustand)
      styles/      # Tailwind v4 + React Flow dark theme
      types/       # nodes, edges, workflow, chat, spec
  public/          # Vite build output (served by MCP server)

Scripts:

pnpm playground:dev -- starts Vite dev server (:4344) with hot reload (proxies API to :4343)
pnpm playground -- production mode, serves built UI from public/ on :4343 (standalone, no Claude Code)
pnpm playground:build -- builds both server and UI for production

Important: Claude Code auto-starts the MCP server (HTTP :4343 + stdio) via .mcp.json. The playground:dev script only starts Vite — it does NOT start the API server, since Claude Code already manages it. The Vite proxy forwards /events, /prompt, /respond, /api/* to :4343.

When to use this skill

User wants to visually design a Temporal workflow (drag nodes, connect flow)
User wants to inspect or modify an existing workflow from the monorepo
User wants to generate workflow code from a visual spec
User asks to "build a workflow", "design a workflow", or "open the workflow builder"
User wants to explore Temporal patterns interactively

Read the full file on GitHub · 159 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

4d ago First seen · 159 lines · 68 tokens per session scan A 2574ed303955

Subscribe to this mod's changes

temporal-playground is a skill published in the GitHub repository proyecto26/projectx (83 stars, last pushed 4mo ago), licensed MIT. It adds 68 tokens to every session and 1,786 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX event-driven-architecture event-driven-microservices full-stack full-stack-application full-stack-developer full-stack-development

create-remotion-geist

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.

Marve10s/Better-Fullstack · 54 tokens

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Marve10s/Better-Fullstack · 44 tokens

design-ui

For each screen in flows.md, select shadcn/ui components and layout, note empty/loading/error states, and document basic accessibility. Drafts ui.md then awaits approval.

evgenii-studitskikh/Claude-Code-SaaS-Studio · 38 tokens

map-flows

Derive key user journeys and the full screen list from the PRD. Confirm primary flows with the user, then produce flows.md as the UX contract for design-ui and build-feature.

evgenii-studitskikh/Claude-Code-SaaS-Studio · 41 tokens

material-ui-tailwind

Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.

mui/material-ui · 67 tokens

read

Reads URLs and PDFs by fetching source content, defaulting to concise summaries for plain read requests and clean Markdown when asked to convert, save, quote, cite, or feed downstream work. Use when users ask in any language to read, fetch, check, summarize, quote, cite, convert, or save a URL or PDF. Not for local…

tw93/Waza · 78 tokens