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.
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:
- Read
.claude/skills/web3-implementer/hook-patterns.mdfor layer-appropriate hook templates - Read
.claude/docs/project-rules.mdfor project conventions (two-layer pattern, address safety, etc.) - Read
.claude/docs/data-patterns.mdfor the two-layer hook architecture overview
Instructions
- Parse the hook name from
$ARGUMENTS - Ensure the name starts with
use - 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 (usesuseReadContract)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 undersrc/hooks/ - Otherwise, place directly in
src/hooks/
- Create the hook file with:
- Proper TypeScript return types
- JSDoc documentation
ChainContainer.useContainer()for chain/wallet state (never wagmi directly)enabledguards for conditional queries- Error handling where appropriate
- If the hook needs shared types, add them to
src/types/
Template (General)
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:
yarn typecheck && yarn lint && yarn prettier && yarn build
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?