Agent skill

React Hook Form Audit

by pproenca in pproenca/dot-skills

Audits a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root, Controller inlined in parent, async submit without try/catch, missing setError on server…

MITAuto-check passedFrontend & Design

Install React Hook Form Audit

skills CLI
$ npx skills add pproenca/dot-skills --skill react-hook-form-audit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pproenca/dot-skills react-hook-form-audit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/react-hook-form-audit .claude/skills/react-hook-form-audit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-hook-form-audit
GitHub stars
214
Token cost
~1.6k tokens
SKILL.md length
612 words
Files
14 (incl. scripts, references)
Skills in repo
182
Repo updated
First seen
Licence
MIT

At a glance

Audits a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root, Controller inlined in parent, async submit without try/catch, missing setError on server…

  • Works in 5 steps: Confirm project is a Next.js App Router… → Run bash scripts/audit.sh [--project ] → Read the generated .rhf-audit-report.md… → …
  • The user asks to audit/review/lint RHF usage
  • SKILL.md covers When to Apply, Tool Requirements, Risk Level and Workflow Overview, plus 6 more sections
  • Runs Shell and JavaScript scripts from its folder; calls bash and brew

What it does

React Hook Form Audit is an agent skill from pproenca/dot-skills. Audits a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root, Controller inlined in parent, async submit without try/catch, missing setError on server failures, RHF in non-"use client" files, RHF mixed with useActionState, schemas defined inside components, useFieldArray without field.id keys, register({ disabled }) for visual disabling, useFieldArray({ disabled }) that silently no-ops mutations, useEffect+reset(data) instead of the values prop. Read-only; emits a…

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts and reference files (for example `config.json`, `gotchas.md` and `metadata.json`).

It sits in Frontend & Design, covering React components. It works with Next.js. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

  • The user asks to audit/review/lint RHF usage
  • Find form anti-patterns
  • Run a quality check on forms — even if they dont say react-hook-form by name
  • They mention auditing forms in a Next.js project

Example prompts

  • “use client”
  • “t say”
  • “Use the react-hook-form-audit skill to audit a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root…”
  • “/react-hook-form-audit”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Confirm project is a Next.js App Router app with react-hook-form installed (detect-project.sh will check)
  2. Run bash scripts/audit.sh [--project ]
  3. Read the generated .rhf-audit-report.md in the project root
  4. For each finding, follow the link to the companion distillation rule for the fix
  5. After fixing, re-run to verify a clean audit

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 8 files in scripts/ (Shell and JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • bash
    • brew

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Hook Form Audit loads about 1.6k tokens when it runs, and up to ~7.2k if it reads all its reference files. Until then it costs about 220 tokens; SKILL.md has 612 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~220
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 612 words, ~1,577 tokens.

Download SKILL.mdSave it as .claude/skills/react-hook-form-audit/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.
name
react-hook-form-audit
description
Audits a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root, Controller inlined in parent, async submit without try/catch, missing setError on server failures, RHF in non-"use client" files, RHF mixed with useActionState, schemas defined inside components, useFieldArray without field.id keys, register({ disabled }) for visual disabling, useFieldArray({ disabled }) that silently no-ops mutations, useEffect+reset(data) instead of the values prop. Read-only; emits a markdown report with file:line citations linking back to the companion `react-hook-form` distillation skill. Trigger when the user asks to audit/review/lint RHF usage, find form anti-patterns, or run a quality check on forms — even if they don't say "react-hook-form" by name; if they mention auditing forms in a Next.js project, use this skill.

React Hook Form Audit for Next.js

Static-analysis audit that detects 16 React Hook Form anti-patterns in Next.js App Router codebases. Combines ripgrep (fast pass for regex-detectable rules) with ts-morph (AST pass for structural rules). Outputs a markdown report grouped by severity, with file:line references and links back to the companion react-hook-form distillation skill.

When to Apply

  • User asks to audit, review, or lint React Hook Form usage in a Next.js project
  • User reports symptoms like "the form re-renders too much" or "we have RHF bugs we can't pin down"
  • Before a PR review of new RHF-heavy code
  • As a CI gate (exit code 1 on CRITICAL/HIGH findings)
  • After upgrading react-hook-form, to catch advice that drifted

Tool Requirements

  • rg (ripgrep) — install via brew install ripgrep or your package manager
  • node ≥ 18 with npm — used to run the AST detectors via ts-morph
  • jq — for JSON munging in the orchestrator

ts-morph is installed on first run into scripts/node_modules/ (one-time, ~30s). The skill never touches the audited project's node_modules.

Risk Level

Read-only. The skill reads source files and writes one markdown report (plus an optional JSON sidecar) to the audited project root. No git operations, no package mutations, no network calls.

Workflow Overview

1. detect-project.sh   Verify Next.js + react-hook-form in package.json
2. collect-files.sh    Ripgrep for "use client" files importing RHF
3. detect-fast.sh      Ripgrep detectors (rules 5, 11, 14)
4. detect-ast.mjs      ts-morph detectors (rules 1-3, 6-10, 12-13, 15-17)
5. render-report.mjs   Render markdown + JSON; print summary; exit 0/1

See references/workflow.md for the per-step contract, error handling, and CI integration.

Usage

bash
# Audit the current directory
bash scripts/audit.sh

# Audit a specific project
bash scripts/audit.sh --project /path/to/nextjs-app

# Preview without writing the report file
bash scripts/audit.sh --dry-run

Exit codes:

  • 0 — no CRITICAL or HIGH findings
  • 1 — CRITICAL or HIGH findings exist
  • 2 — environment or configuration error (missing tool, invalid project)

Detector Catalog

16 detectors across 4 severities. See references/detectors.md for per-rule pattern, AST shape, false-positive notes, and the line of advice each detector enforces.

IDSeverityWhat it catches
01CRITICALwatch() in same component as useForm()
02CRITICALwatch() with no args (subscribes to all fields)
03CRITICALuseForm() without defaultValues
05CRITICALRHF imported in a non-"use client" file
06HIGH<Controller> inlined inside useForm() parent
07HIGHAsync submit handler without try/catch
08HIGHValidation schema defined inside the component
09HIGHSubmit calls fetch/axios but never setError('root.*')
10HIGHRHF mixed with useActionState in same component
11MEDIUMmode: 'onChange' without explanatory comment
12MEDIUMregister({ disabled: <state> }) for visual disable
13MEDIUMuseFieldArray map missing field.id as key
14LOWreValidateMode: 'onBlur' (now demoted advice)
15LOWuseFormContext() usage (manual review)
16MEDIUMuseFieldArray({ disabled: <state> }) — silently no-ops every mutation
17MEDIUMuseEffect + reset(data) instead of the values prop

Rule 04 (useEffect depends on the useForm return) was removed in 0.2.0 — the premise was false. See references/detectors.md.

Show full SKILL.md (206 more words)Show less

How to Use

  1. Confirm project is a Next.js App Router app with react-hook-form installed (detect-project.sh will check)
  2. Run bash scripts/audit.sh [--project <path>]
  3. Read the generated .rhf-audit-report.md in the project root
  4. For each finding, follow the link to the companion distillation rule for the fix
  5. After fixing, re-run to verify a clean audit

If a detector is too noisy in your project, narrow include_globs / widen exclude_globs in config.json rather than disabling detectors — the catalog is small enough that each finding should be either a real issue or a documented exception worth a comment.

Setup

The skill ships with sensible defaults in config.json. On first run, audit.sh will install ts-morph into scripts/node_modules/. Override settings by editing config.json:

  • project_root — absolute path to the project (defaults to current directory)
  • report_path / json_report_path — output filenames (relative to project root)
  • rule_link_base — base URL or path for companion-rule links
  • include_globs / exclude_globs — narrow the scan surface

Reference Files

  • react-hook-form — the companion distillation skill with the 35 rules this auditor enforces. Findings link directly to its reference files.
  • react-19 — for Server Action / useActionState patterns the audit explicitly does NOT cover

© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 13 other files (scripts, references) in skills/.curated/react-hook-form-audit of pproenca/dot-skills.

  • SKILL.md
  • config.json
  • gotchas.md
  • metadata.json
  • references/detectors.md
  • references/workflow.md
  • scripts/.gitignore
  • scripts/audit.sh
  • scripts/collect-files.sh
  • scripts/detect-ast.mjs
  • scripts/detect-fast.sh
  • scripts/detect-project.sh
  • scripts/package.json
  • scripts/render-report.mjs

Open the folder on GitHubat commit cf93c57

Compare with similar skills

React Hook Form Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Hook Form Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Hook Form Audit this skillpproenca/dot-skills214—~1.6kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
React View Transitions Guidevercel-labs/next-beats16710 repos~3.1kAutomated safety check: PassMIT
Vercel React Best Practicessanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Chakra UI v2 to v3 Migrationchakra-ui/chakra-ui41k—~3.4kAutomated safety check: PassMIT

Similar skills

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    167 GitHub starsUsed in 10 repos~3.1k tokens
    Frontend & DesignAuto-check passed
  • Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • Chakra UI v2 to v3 Migration

    chakra-ui/chakra-ui

    Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

    41k GitHub stars~3.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

More from pproenca/dot-skills

All 182 skills in this repo
  • Audio Voice Recovery

    pproenca/dot-skills

    Audio forensics and voice recovery guidelines for CSI-level audio analysis.

    214 GitHub stars~3.3k tokensUpdated 1 mo ago
    Auto-check passed
  • Codemod React Pipeline

    pproenca/dot-skills

    Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

    214 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Dev Rfc

    pproenca/dot-skills

    Create well-structured RFCs and technical proposals for software projects.

    214 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Dx Harness

    pproenca/dot-skills

    Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.

    214 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Language Spec Author

    pproenca/dot-skills

    Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…

    214 GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed
  • Python Pep Author

    pproenca/dot-skills

    Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…

    214 GitHub stars~2.1k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about React Hook Form Audit

What does React Hook Form Audit do?

Audits a Next.js (App Router, 14/15+) codebase for React Hook Form anti-patterns — watch() at form root, Controller inlined in parent, async submit without try/catch, missing setError on server…. React Hook Form Audit is an agent skill from pproenca/dot-skills.id keys, register({ disabled }) for visual disabling, useFieldArray({ disabled }) that silently no-ops mutations, useEffect+reset(data) instead of the values prop.

When should I use React Hook Form Audit?

React Hook Form Audit fits situations like: the user asks to audit/review/lint RHF usage; find form anti-patterns; run a quality check on forms — even if they dont say react-hook-form by name; they mention auditing forms in a Next.js project.

How do I install React Hook Form Audit in Claude Code?

Run `npx skills add pproenca/dot-skills --skill react-hook-form-audit -a claude-code`. Or copy the skill folder (skills/.curated/react-hook-form-audit in pproenca/dot-skills) into .claude/skills/react-hook-form-audit in your project. Claude Code loads it when a task matches its description.

How do I install React Hook Form Audit in Codex?

Run `npx skills add pproenca/dot-skills --skill react-hook-form-audit -a codex`. Or copy the skill folder (skills/.curated/react-hook-form-audit in pproenca/dot-skills) into .agents/skills/react-hook-form-audit in your project. Codex loads it when a task matches its description.

Can I use React Hook Form Audit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill react-hook-form-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-hook-form-audit, .gemini/skills/react-hook-form-audit, .github/skills/react-hook-form-audit and .opencode/skills/react-hook-form-audit in your project.

What does React Hook Form Audit need to run?

Going by SKILL.md and its folder, React Hook Form Audit needs a shell and JavaScript for the scripts in its folder and the command-line tools its instructions call (bash and brew). Our summary lists: Node.js; A Bash shell.

Does React Hook Form Audit access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Hook Form Audit safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does React Hook Form Audit use?

React Hook Form Audit is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Hook Form Audit use?

About 1.6k tokens (SKILL.md is roughly 6.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.6k tokens, read only when the agent opens those files.

What are the alternatives to React Hook Form Audit?

Skills that share tags, products or a category with React Hook Form Audit: Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars), React View Transitions Guide (vercel-labs/next-beats, 167 stars), Vercel React Best Practices (sanity-io/sanity, 6.4k stars) and GSAP for React (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Hook Form Audit?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.