new-hook

Scaffold custom React hooks with Vitest test files using GAIA CLI.

21|4|Updated Sep 4, 2024
One-click install
npx skills add https://github.com/gaia-react/gaia --skill new-hook-gaia-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-hook
Source: https://github.com/gaia-react/gaia/tree/main/.claude/skills/new-hook
Command: npx skills add https://github.com/gaia-react/gaia --skill new-hook-gaia-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the boilerplate overhead and structural inconsistency associated with creating custom React hooks, ensuring every new hook follows the project's established testing and architectural conventions.

Core Features & Use Cases

  • Automated Scaffolding: Generates the hook file and corresponding Vitest test file in the correct directory.
  • Standardized Architecture: Enforces the use* naming convention and ensures hooks are placed under app/hooks.
  • Use Case: When you need to extract complex state logic or side effects into a reusable hook, this skill handles the file creation and test setup so you can focus immediately on the implementation logic.

Quick Start

Ask the assistant to create a new hook named useAuth with parameters for user and token.

Frequently Asked Questions about new-hook

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

FAQPage Schema
How do I scaffold a React hook and its Vitest test file together?

Scaffolding a React hook and its Vitest test file together requires an automated tool that generates both files in the correct directory simultaneously, eliminating manual boilerplate creation and enforcing architectural consistency for custom hooks.

Why should I extract state logic into custom React hooks?

Extracting state logic into custom React hooks allows you to isolate complex state management and side effects into reusable, standardized modules, reducing boilerplate overhead and ensuring consistent architectural conventions across your project.

What is the best way to enforce the use naming convention for React hooks?

The best way to enforce the use naming convention for React hooks is by using an automated scaffolding tool that standardizes file creation, automatically placing the generated hook modules under the app/hooks directory.

Do I need a specific CLI to generate React hook boilerplate?

Yes, generating React hook boilerplate with this scaffolding approach requires the GAIA CLI to execute the creation command and verify type safety for the newly generated hook and its associated test files.

Can I automatically set up Vitest tests when creating a new React hook?

Yes, you can automatically set up Vitest tests when creating a new React hook. The scaffolding process generates a corresponding test file alongside the hook to facilitate immediate implementation and testing.

What are the limitations of automated React hook scaffolding?

The limitation of automated React hook scaffolding is that it only handles file creation and test setup for state and effect logic; it requires the GAIA CLI to execute and does not implement the internal hook logic itself.