hook

A guide for creating reusable React hooks, which are functions that share component behavior such as authentication or scrolling.

In plain words
What is it for?
Use it when extracting reusable logic from a React component or creating a new hook such as useAuth or useScroll.
Why use it?
It removes the guesswork around where to place a hook and which project conventions to follow in Next.js and React Router projects.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/darkroomengineering/cc-settings/hook
Any agent
npx skills add darkroomengineering/cc-settings --skill hook
Clone the repo
git clone --depth 1 https://github.com/darkroomengineering/cc-settings

Made for: Claude Code, Codex.

Per session 42 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 895 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00042 $0.00895
Opus 5 $0.00021 $0.00447
Sonnet 5 $0.00008 $0.00179
Haiku 4.5 $0.00004 $0.00089

Measured yesterday against content hash b46341b0c8f9, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

hook scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/hook/SKILL.md · 120 lines

How it starts

The opening of the file, as written. The whole thing — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Create Custom Hook

Create a custom React hook following Darkroom conventions. The hook itself is stack-agnostic — what differs between satus and novus is the path alias.

Step 1 — Detect stack

Read package.json:

  • dependencies.next → satus / Next.js (path alias @/, no lib/hooks/ requires 'use client' boundary)
  • dependencies["react-router"] → novus / React Router (path alias ~/, components isomorphic)

Step 2 — Choose location

Stack Hook path
satus lib/hooks/<name>.ts
novus hooks/<name>.ts (novus puts hooks/ at the project root)

Confirm by checking the existing lib/hooks/ or hooks/ directory structure if either pattern is unclear from package.json alone.

Step 3 — Emit template

satus / Next.js

// lib/hooks/<name>.ts
'use client'

import { useState, useEffect } from 'react'

interface Use<Name>Options {
  // Hook configuration options
}

interface Use<Name>Return {
  // Return type definition
}

export function use<Name>(options?: Use<Name>Options): Use<Name>Return {
  // Implementation
  return {
    // Return values
  }
}

novus / React Router

// hooks/<name>.ts
// No 'use client' — RR components are isomorphic; the hook runs wherever
// it's called from. If the hook touches browser APIs, guard with
// `typeof window !== 'undefined'` or call from inside `useEffect`.

import { useState, useEffect } from 'react'

interface Use<Name>Options {
  // Hook configuration options
}

interface Use<Name>Return {
  // Return type definition
}

export function use<Name>(options?: Use<Name>Options): Use<Name>Return {
  // Implementation
  return {
    // Return values
  }
}

Conventions (both stacks)

  1. Type everything — options interface, return interface.
  2. Named exportexport function useX, not default.
  3. Prefix with use — React hook naming convention.
  4. No memoization — React Compiler handles it automatically.

Stack-specific

satus novus
Directive 'use client' (hooks live in client boundary) None (isomorphic)
Browser API guard Only runs after hydration anyway Guard with typeof window or use useEffect
Path alias @/ ~/

Read the full file on GitHub · 120 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 120 lines · 42 tokens per session scan A b46341b0c8f9

Subscribe to this mod's changes

hook is a skill published in the GitHub repository darkroomengineering/cc-settings (42 stars, last pushed 3d ago), licensed MIT. It adds 42 tokens to every session and 895 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

skill-creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

artivilla/agents-config · 45 tokens

azure-ai-agents-persistent-dotnet

Azure AI Agents Persistent SDK for .NET. Low-level SDK for creating and managing AI agents with threads, messages, runs, and tools. Use for agent CRUD, conversation threads, streaming responses, function calling, file search, and code interpreter. Triggers: "PersistentAgentsClient", "persistent agents", "agent…

microsoft/skills · 90 tokens

azure-ai-agents-persistent-java

Azure AI Agents Persistent SDK for Java. Low-level SDK for creating and managing AI agents with threads, messages, runs, and tools. Triggers: "PersistentAgentsClient", "persistent agents java", "agent threads java", "agent runs java", "streaming agents java".

microsoft/skills · 63 tokens

creating-claude-agents

Use when creating or improving Claude Code agents. Expert guidance on agent file structure, frontmatter, persona definition, tool access, model selection, and validation against schema.

AgentWorkforce/relay · 40 tokens

creating-agent-skills-skill

Use when creating Agent Skills packages (SKILL.md format) for Codex CLI, GitHub Copilot, or Amp - provides the agentskills.io specification with frontmatter constraints, directory structure, and validation rules.

AgentWorkforce/relay · 49 tokens

create-agent

Creates and configures agent.yaml files, writes SOUL.md personality definitions, and sets up agent directory structures with skills, tools, and knowledge. Use when the user wants to configure an agent, create agent.yaml, write SOUL.md, set up agent directory structure, or customize agent settings.

open-gitagent/opengap · 62 tokens