ReddRadar
Agent skill
tanstack-hook
Generates TanStack Query hooks following project patterns with useQuery. Creates hooks in src/hooks/ with typed return values. Use when creating data fetching logic.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/tanstack-hook
SKILL.md
TanStack Hook Generator Skill
Creates data-fetching hooks using TanStack Query patterns.
File Pattern
src/hooks/use{Feature}.ts
Hook Template
// src/hooks/use{Feature}.ts
import { useQuery } from "@tanstack/react-query";
import { mock{Feature}Data, {Feature}Data } from "../data/mock-{feature}";
async function fetch{Feature}Data(): Promise<{Feature}Data> {
// Replace with actual API call in production
await new Promise((resolve) => setTimeout(resolve, 500));
return mock{Feature}Data;
}
export function use{Feature}() {
return useQuery({
queryKey: ["{feature}"],
queryFn: fetch{Feature}Data,
staleTime: 1000 * 60 * 5, // 5 minutes
});
}
Return Pattern (for complex hooks)
export function use{Feature}() {
const [filter, setFilter] = useState("");
const query = useQuery({
queryKey: ["{feature}", filter],
queryFn: () => fetch{Feature}Data(filter),
});
const handleAction = useCallback(() => {
// Action logic
}, []);
return {
state: {
data: query.data,
isLoading: query.isLoading,
error: query.error,
filter,
},
actions: {
setFilter,
handleAction,
refetch: query.refetch,
},
};
}
Usage in Component
export function {Feature}Component() {
const { data, isLoading, error } = use{Feature}();
if (isLoading) return <Skeleton />;
if (error) return <Alert status="danger">Error loading data</Alert>;
return <div>{data.name}</div>;
}
Conventions
- Filename:
use{Feature}.tsin camelCase - Named export:
export function use{Feature}() - Query keys: Descriptive arrays like
["{feature}"] - Stale time: Set appropriate cache duration
- Error handling: Let components handle loading/error states
Examples
See these files for reference:
src/hooks/useOrder.tssrc/hooks/useProjectPage.tssrc/hooks/useUnmatchedItems.ts
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
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?