new-hook

Generate React Query hooks with loading and error states for TypeScript projects.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/alexanderjamesmcleod/makecents --skill new-hook-alexanderjamesmcleod
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-hook
Source: https://github.com/alexanderjamesmcleod/makecents/tree/main/src/skills/automation/new-hook.skill
Command: npx skills add https://github.com/alexanderjamesmcleod/makecents --skill new-hook-alexanderjamesmcleod

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Creating React Query hooks for data fetching is repetitive and error-prone. This skill automates the generation of standardized, typed hooks to reduce boilerplate and ensure consistency across entities.

Core Features & Use Cases

  • Query Hook: generates a typed use[Entity] hook to fetch data with loading and error handling.
  • Mutation Hook: provides create/update/delete mutations with consistent typings and cache invalidation patterns.
  • Directory Layout: places generated hooks in a defined hooks directory for easy discovery and reuse.

Quick Start

Run new-hook query <EntityName> to generate a React Query hook for that entity.

Frequently Asked Questions about new-hook

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

FAQPage Schema
How do I generate React Query hooks for TypeScript data fetching?

You can generate React Query hooks in TypeScript by running a command against an entity name. This outputs typed query and mutation hook files with standard conventions for loading and error states.

What is the best way to reduce boilerplate when creating React Query mutation hooks?

The best way to reduce boilerplate for React Query mutation hooks is to use a code-generation workflow. This automates the creation of typed create, update, and delete mutations with consistent cache invalidation patterns.

Do I need a shared API abstraction to use generated React Query hooks?

Yes, the generated React Query hooks rely on a shared API abstraction for data access. This abstraction standardizes how the generated TypeScript hooks fetch data and interact with your backend entities.

How does the code-generation workflow handle directory layout for TypeScript hooks?

The code-generation workflow places generated TypeScript hooks in a defined hooks directory. This directory layout ensures that your query and mutation hooks are easy to discover and reuse across your React project.

Can I generate both query and mutation hooks for the same entity?

Yes, you can generate both query and mutation hooks for the same entity. The workflow creates typed use[Entity] query hooks for fetching data alongside create, update, and delete mutation hooks for that entity.