# Frontend Streaming Contract

> Design and review frontend streaming contracts. Use when handling server-sent events, WebSocket messages, async iterables, stream parsers, reducer state, terminal states, progress timelines, cancellation, retries, or UI updates driven by runtime events.

- **Type:** Skill
- **Install:** `agentstack add skill-hsienw-ai-agent-engineering-playbook-frontend-streaming-contract`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [HsienW](https://agentstack.voostack.com/s/hsienw)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [HsienW](https://github.com/HsienW)
- **Source:** https://github.com/HsienW/ai-agent-engineering-playbook/tree/master/skills-contract-boundaries/frontend-streaming-contract

## Install

```sh
agentstack add skill-hsienw-ai-agent-engineering-playbook-frontend-streaming-contract
```

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

## About

# Frontend Streaming Contract

## Skill Interface

- Name: frontend-streaming-contract.
- Description: Design and review frontend streaming contracts for server-sent events, WebSocket messages, async iterables, stream parsers, reducer state, terminal states, progress timelines, cancellation, retries, and UI updates driven by runtime events.
- Parameters: Stream transport, runtime event schema, parser behavior, reducer state shape, ordering and duplicate rules, terminal states, cancellation and retry behavior, UI rendering states, and verification scenarios.
- Instructions: Use this skill when frontend state or UI is driven by streamed runtime events. Treat each event as a versioned contract, validate unknown payloads, keep terminal states final, make reducers resilient to future events, and test interruption, ordering, cancellation, and timeout cases.

Treat streaming as a contract, not as ad hoc text appended to the UI. Every
event should have a stable type, runtime validation, ordering behavior, and a
defined effect on state.

## Contract Shape

Define a discriminated union for runtime events:

```ts
type RuntimeEvent =
  | { type: 'workflow.started'; runId: string; ts: number }
  | { type: 'step.started'; stepId: string; label: string; ts: number }
  | { type: 'step.progress'; stepId: string; message?: string; ts: number }
  | { type: 'step.completed'; stepId: string; durationMs?: number; ts: number }
  | { type: 'step.failed'; stepId: string; errorCode: string; ts: number }
  | { type: 'answer.delta'; delta: string; ts: number }
  | { type: 'card.emitted'; cardType: string; payload: unknown; ts: number };
```

Use a parser that accepts `unknown`, validates the event, and returns either a
known event or an explicit unknown-event fallback.

## State Rules

- Terminal states are final: `success`, `error`, `cancelled`, and `timeout`
  must not return to `running`.
- Progress events must not overwrite completed results.
- Duplicate events should be idempotent when an event id is available.
- Out-of-order events should be ignored, buffered, or reconciled by a documented
  rule.
- Reducers must handle unknown event types without crashing.
- Event state should be keyed by stable identifiers such as `runId`, `stepId`,
  `messageId`, or `toolCallId`.

## Transport Rules

- For SSE, parse event frames separately from event payloads.
- For WebSockets, validate each message before reducing it.
- For async iterables, define cleanup behavior when the consumer stops.
- Propagate cancellation to the upstream operation when supported.
- Respect backpressure when bridging streams between runtimes.

## UI Rules

- Keep parsing, validation, and event reduction outside presentational
  components.
- Show running, partial, completed, failed, cancelled, timeout, and unknown
  states explicitly.
- Do not infer machine state from localized text.
- Use fallback rendering for unknown future events.
- Keep timelines stable when events arrive late or duplicate.

## Verification

Test valid event sequences, unknown event types, duplicate events, out-of-order
events, stream interruption, cancellation, timeout, and terminal events followed
by progress.

## Source & license

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

- **Author:** [HsienW](https://github.com/HsienW)
- **Source:** [HsienW/ai-agent-engineering-playbook](https://github.com/HsienW/ai-agent-engineering-playbook)
- **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:** yes
- **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-hsienw-ai-agent-engineering-playbook-frontend-streaming-contract
- Seller: https://agentstack.voostack.com/s/hsienw
- 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%.