add-api-route

Generate DTO types, API client wrappers, and TanStack Query hooks for new backend domains.

2|1|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill add-api-route-529-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-api-route
Source: https://github.com/529-studio/Vmarble-Warehouse-Management-Client/tree/main/.agents/skills/add-api-route
Command: npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill add-api-route-529-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the inconsistency and boilerplate overhead associated with adding new API endpoints, ensuring that all frontend-backend communication follows a strict, type-safe, and maintainable 4-file pattern.

Core Features & Use Cases

  • Type-Safe API Integration: Enforces the use of shared DTO types that mirror Go backend structures, preventing runtime errors.
  • Standardized Hooks: Provides a consistent pattern for TanStack Query hooks, including automatic mutation invalidation and error handling.
  • Use Case: When adding a new domain like 'Inventory', use this skill to generate the necessary types, API client wrappers, and React Query hooks to ensure the new feature integrates seamlessly with existing caching and error-handling logic.

Quick Start

Use the add-api-route skill to scaffold the necessary types, API functions, and TanStack Query hooks for a new backend domain.

Frequently Asked Questions about add-api-route

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

FAQPage Schema
How do I standardize TanStack Query hooks and API integration in a Next.js frontend?

To standardize TanStack Query hooks and API integration, you enforce a strict 4-file pattern generating shared DTO types, API client wrappers, and data-fetching hooks. This maintains consistent query key conventions, mutation invalidation, and centralized error handling across new domains.

What is the 4-file pattern for standardizing API endpoints and React Query hooks?

The 4-file pattern standardizes API endpoints and React Query hooks by separating shared DTO types, API client wrappers, TanStack Query data-fetching hooks, and mutation invalidation logic. This enforces type-safe communication and consistent caching behavior for new backend domains.

Does this API integration approach require specific TypeScript types to match the Go backend?

Yes, this API integration approach requires specific TypeScript DTO types that strictly mirror Go backend structures. Enforcing shared type definitions prevents runtime errors and ensures type-safe communication across the frontend-backend architecture.

How do I handle mutation invalidation and centralized error handling for new API routes?

To handle mutation invalidation and centralized error handling for new API routes, you use standardized TanStack Query hooks. These hooks automatically manage cache invalidation and route errors according to strict architectural conventions for every new domain.

Can I use this boilerplate to scaffold TanStack Query hooks for any new backend domain?

Yes, you can use this boilerplate to scaffold TanStack Query hooks, API client wrappers, and DTO types for any new backend domain. It ensures new features integrate seamlessly with existing caching and error-handling logic in your Next.js architecture.