frontend-data-layer

Build typed frontend data flows with ky, React Query, and Zod.

11|2|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/recca0120/code-quest --skill frontend-data-layer-recca0120
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-data-layer
Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/frontend-data-layer
Command: npx skills add https://github.com/recca0120/code-quest --skill frontend-data-layer-recca0120

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with scattered API calls, inconsistent typing, weak validation, and noisy error handling that makes UI states unpredictable and hard to maintain.

Core Features & Use Cases

  • Deterministic HTTP layer with ky: Centralizes request configuration (timeouts, retries) and response/error hooks so auth and error parsing behave consistently.
  • Typed service functions with Zod: Ensures every API response is schema-validated via zod.parse, turning malformed payloads into clear query/mutation error states.
  • Scalable React Query queryOptions pattern: Standardizes query keys, query options, cache invalidation, and mutation side effects to keep data fresh without manual wiring.
  • Form validation with React Hook Form + Zod: Applies the same schema-driven approach to user input validation, including dynamic arrays via useFieldArray.
  • Multi-transport consistency (Socket.io): Reuses Zod schemas to validate outbound socket emits before sending, even when the ky/React Query stack is bypassed.

Quick Start

Implement your new endpoint by adding a Zod-validated service function, then expose it as a queryOptions factory with a stable queryKey, and finally consume it with useQuery while letting React Query surface typed validation failures automatically.

Frequently Asked Questions about frontend-data-layer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate API responses with Zod and React Query?

Validate API responses with Zod by calling zod.parse inside service-layer functions, then expose them via React Query queryOptions factories so malformed payloads automatically surface as typed query or mutation error states.

What's the best way to standardize React Query queryKeys for scalable caching?

The best way to standardize React Query queryKeys is using queryOptions factories that centralize query keys, caching parameters, and invalidation rules, ensuring data freshness without manual wiring across component fetches.

How do I centralize HTTP client configuration with ky for consistent error handling?

Centralize HTTP client configuration with ky by creating a singleton client with configurable request hooks for timeouts and retries, ensuring auth tokens and error parsing behave consistently across all service functions.

Can I use React Hook Form with Zod for schema-driven input validation?

Yes, you can use React Hook Form with a Zod resolver to apply schema-driven validation to user inputs, extending the same validation logic to dynamic form arrays managed via useFieldArray.

How do I validate Socket.io emits with Zod when bypassing the HTTP client?

Validate Socket.io emits with Zod by reusing existing schemas to parse outbound payloads before sending, ensuring multi-transport data consistency even when the standard ky and React Query stack is bypassed.

Do I need a ky singleton client to build consistent frontend data flows?

Yes, building consistent frontend data flows requires a ky singleton client to centralize request configuration, enabling predictable service functions that parse API responses via Zod for reliable UI states.