gen-hook

Generate type-safe React Query hooks from a service layer.

5|1|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Ramakrishnan24689/codeapps-toolkit --skill gen-hook
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gen-hook
Source: https://github.com/Ramakrishnan24689/codeapps-toolkit/tree/main/skills/gen-hook
Command: npx skills add https://github.com/Ramakrishnan24689/codeapps-toolkit --skill gen-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the generation of typed React Query hooks (queries and mutations) from a service layer, reducing boilerplate and ensuring consistent patterns across features.

Core Features & Use Cases

  • Query hooks generation: Creates hooks for lists and details with proper query key factories and cache management.
  • Mutation hooks generation: Provides create, update, and delete hooks with cache invalidation to keep UI in sync.
  • Type safety & patterns: Includes TypeScript types for DTOs and domain models, plus standardized patterns for error handling and query keys.
  • Template-driven: Uses a reusable template to generate consistent code structures across features.
  • Use cases: Ideal for projects that progressively build out feature sandboxes with service layers and require scalable hook generation.

Quick Start

Run the gen-hook command with your feature name to generate a complete set of React Query hooks.

Frequently Asked Questions about gen-hook

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

FAQPage Schema
How do I generate React Query hooks from a service layer to reduce boilerplate?

You can generate React Query hooks from a service layer by running a template-driven command with your feature name, which produces typed queries and mutations with query key factories and cache invalidation. This reduces boilerplate and ensures consistent data fetching patterns.

What is the best way to manage cache invalidation for React Query CRUD mutations in TypeScript?

The best way to manage cache invalidation for React Query CRUD mutations is to generate mutation hooks that automatically invalidate relevant query keys after create, update, or delete operations, keeping the UI in sync without manual cache management code.

Can I generate type-safe React Query hooks with TypeScript for list and detail views?

Yes, you can generate type-safe React Query hooks for both list and detail views. The generation process includes TypeScript typings for DTOs and domain models, applying standardized query key factories to manage structured data fetching across features.

Does generating React Query hooks support optimistic updates for better UX?

Yes, generating React Query hooks supports optional optimistic updates to provide a robust UX. The generated mutation hooks can be configured to apply optimistic updates alongside automatic cache invalidation for create, update, and delete operations.

Do I need a service layer defined before generating React Query hooks?

Yes, you need a defined service layer before generating React Query hooks. The generation process uses a template-driven approach that reads your service layer to produce structured query and mutation hooks with proper TypeScript types and cache management.

When should I use a React Query hook generator instead of writing hooks manually?

You should use a React Query hook generator when progressively building out feature sandboxes that require scalable hook generation. It automates boilerplate for queries and mutations, ensuring standardized patterns for error handling, query keys, and cache invalidation across large TypeScript projects.