frontend-data-contracts
A framework-agnostic discipline for type safety at the network edge: one typed API client, parse-don't-validate, a single response envelope, one ApiError type, and branded IDs.
Source: Stareezy
At a glance
- Best for
- Designing one typed API client as the only fetch boundary
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Parsing wire JSON into trusted domain types at the edge
- Source
- stareezy-1/frontend-architecture-skill
01 / Understand the skill
About frontend-data-contracts
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 response envelope ({ data } / { error }), one normalized typed error class for every failure mode (server error, bad status, network/abort), per-field validation errors mapped to forms, branded ID types so identifiers can't be mixed, and the rule that raw API shapes never leak past the client. Works with fetch, Zod/Valibot validation, and TanStack Query / RTK Query / SWR. Use this skill when designing an API client, validating or parsing API responses, modeling request/response types, handling API errors, mapping server validation to form fields, or stopping untyped fetch calls from spreading through components. Works with React + Vite, Next.js, Remix, and Expo / React Native.
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 response envelope ({ data } / {…
Not a fit when
don't-validate rule that turns wire JSON into trusted domain types before it enters the app, a single response envelope ({ data } / { error }), one normalized typed error class for every failure mode (server error, bad status, network/abort), per-field validation errors mapped to forms, branded ID types so identifiers can't be mixed, and the rule that raw API shapes never leak past the client.
Read full description
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 response envelope ({ data } / { error }), one normalized typed error class for every failure mode (server error, bad status, network/abort), per-field validation errors mapped to forms, branded ID types so identifiers can't be mixed, and the rule that raw API shapes never leak past the client. Works with fetch, Zod/Valibot validation, and TanStack Query / RTK Query / SWR. Use this skill when designing an API client, validating or parsing API responses, modeling request/response types, handling API errors, mapping server validation to form fields, or stopping untyped fetch calls from spreading through components. Works with React + Vite, Next.js, Remix, and Expo / React Native.
02 / Confirm the fit
Use frontend-data-contracts when you need to
- Designing one typed API client as the only fetch boundary
- Parsing wire JSON into trusted domain types at the edge
- Normalizing every failure into a single typed ApiError
- Branding domain IDs and mapping field errors to forms
03 / See the workflow
How frontend-data-contracts works
- 01Install: npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-data-contracts
- 02Try: Set up a typed apiClient with a single envelope and ApiError for my React app.
- 03Get: A shared/api-client with parse-at-boundary schemas, branded IDs, and typed errors.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Designing one typed API client as the only fetch boundary
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Stareezy
Ready to add frontend-data-contracts?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-data-contracts
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.