frontend-data-contracts

Frontend Data Contracts (typed network boundary)

When to Use

Use this skill when you need a portable, framework-agnostic discipline for type safety at the network edge of any React or React Native app. Establishes one typed API client as the single fetch boundary, a parse-don't-validate rule that turns wire JSON into trusted domain types before it enters the app, a single...

Portable skill — readable by Claude Code, OpenCode, Codex, Cursor, Windsurf, and others.

This skill describes a discipline at the network edge — one client, one envelope, one error

type, validated types — not a state library or a styling system. It pairs with the

frontend-architecture skill (the client lives in shared/api-client/) and is the foundation

the frontend-optimistic-mutations skill builds on.

The goal: the moment data crosses from the network into the app, it stops being any-shaped wire JSON and becomes a trusted, typed domain value — or it becomes a single, typed error. There is exactly one place this transformation happens, and nothing untyped escapes it.

---

0. The five core ideas

1. One client is the only fetch boundary. A single typed apiClient wraps fetch. Components and hooks never call fetch/axios directly — the boundary is enforceable in review and lint.
2. Parse, don't validate. Wire JSON is parsed into domain types at the