Agent skill

new-hook

Creates new custom React hooks following project conventions. Scaffolds TypeScript types, JSDoc documentation, and proper error handling in src/hooks/. References hook-patterns.md for layer-appropriate templates.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/new-hook

SKILL.md

Create New Hook

Create a new custom React hook following project conventions.

Initialization

When invoked:

  1. Read .claude/skills/web3-implementer/hook-patterns.md for layer-appropriate hook templates
  2. Read .claude/docs/project-rules.md for project conventions (two-layer pattern, address safety, etc.)
  3. Read .claude/docs/data-patterns.md for the two-layer hook architecture overview

Instructions

  1. Parse the hook name from $ARGUMENTS
  2. Ensure the name starts with use
  3. Determine the file path and layer:
    • blockchain/useGet*Live.ts — Transform hooks (Layer 2: wraps Ponder hook + transforms data)
    • blockchain/useGet*.ts — Contract read hooks (uses useReadContract)
    • blockchain/use[Action].ts — Contract write hooks (simulate → write → state machine)
    • ponder/usePonder*.ts — Raw Ponder hooks (Layer 1: usePonderQuery)
    • If includes /, use that subfolder under src/hooks/
    • Otherwise, place directly in src/hooks/
  4. Create the hook file with:
    • Proper TypeScript return types
    • JSDoc documentation
    • ChainContainer.useContainer() for chain/wallet state (never wagmi directly)
    • enabled guards for conditional queries
    • Error handling where appropriate
  5. If the hook needs shared types, add them to src/types/

Template (General)

tsx
import { useState, useEffect } from "react";

interface UseHookNameParams {
  // Add params here
}

interface UseHookNameReturn {
  // Add return type here
}

/**
 * Description of what this hook does
 * @param params - Hook parameters
 * @returns Hook return value
 */
export const useHookName = (params: UseHookNameParams): UseHookNameReturn => {
  // Hook implementation

  return {
    // Return values
  };
};

Layer-Specific Patterns

See .claude/skills/web3-implementer/hook-patterns.md for complete templates for:

  • Ponder query hooks (raw data layer)
  • Transform hooks (typed domain objects)
  • Contract read hooks
  • Contract write hooks (simulate → write → state machine)

Verification

After creating the hook:

bash
yarn typecheck && yarn lint && yarn prettier && yarn build

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results