new-hook

Scaffold custom React hooks with TypeScript interfaces and hook conventions.

Updated Feb 10, 2026

Search Tags:#typescript #react #code generation #scaffolding #boilerplate #hook

Ready to run

npx skills add https://github.com/wordshepherd/colophony --skill new-hook-wordshepherd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-hook
Source: https://github.com/wordshepherd/colophony/tree/main/.claude/skills/new-hook
Command: npx skills add https://github.com/wordshepherd/colophony --skill new-hook-wordshepherd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of new custom React hooks, ensuring they follow established patterns and include necessary boilerplate for TypeScript, error handling, and common patterns like queries and mutations.

Core Features & Use Cases

Boilerplate Generation: Creates hook files with pre-defined structures for basic, query, mutation, and state management hooks.
Convention Adherence: Follows React hook naming conventions (use...) and file structure.
TypeScript Support: Includes interfaces and type definitions.
Use Case: When starting a new feature that requires a reusable piece of logic, like managing form state or fetching data, use this skill to quickly scaffold the hook file and focus on implementation.

Quick Start

Use the new-hook skill to create a basic hook named 'user-profile'.

Frequently Asked Questions about new-hook

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

FAQPage Schema

How do I scaffold React hooks with TypeScript boilerplate automatically?▼

This tool generates custom hook files with predefined structures, including necessary TypeScript interfaces and standard naming conventions, to scaffold React hooks with TypeScript boilerplate automatically.

What types of React hooks can I generate for tRPC queries and mutations?▼

For tRPC queries and mutations, you can generate React hooks alongside basic hooks and state management hooks, each with pre-defined structures and proper TypeScript type definitions.

Can I use this to generate state management hooks that follow React conventions?▼

Yes, you can use this to generate state management hooks that follow React conventions, ensuring proper file creation, standard use... naming, and exports within the application's hook directory structure.

Do I need to manually set up the hook directory structure before generating files?▼

You do not need to manually set up the hook directory structure, as the generation process ensures proper file creation and manages the export structure within your application's existing hook directory.