Agent skill · software engineering · sickn33
frontend-data-contracts
A portable, framework-agnostic discipline for type safety at the network edge of any React or React Native app.
Why this skill is useful
Adds a portable, framework-agnostic discipline for type safety at the network edge, including specific patterns for API client implementation that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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, runtime parsing, normalized errors and branded identifiers. 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. --- Example contract The snippets marked “essence” are architecture sketches with omitted project dependencies and methods, not a complete client. A generic get<Invoice> type parameter is only a compile-time assertion: it cannot establish runtime validity. Require the actual schema parse before treating a value as an Invoice, normalize parser failures into the project error type, and keep authorization independent of both schema validation and branded IDs. Bind adapter behavior to the installed library version; do not assume an unsupported per-query callback exists. 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 boundary. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/frontend-data-contracts