Claude Code templates

Claude Code hooks templates

Claude Code hooks templates: a design check hook and a format and lint hook, with the settings.json format, hook events and how exit codes work.

In short

Claude Code hooks are commands that run automatically at set moments, like after Claude Code edits a file or before it runs a tool. Unlike instructions, hooks always run, so they are the way to enforce rules: format every file, lint every change, block off-brand colours. Below: how hooks are set up, a short example, and two ready-made hooks with their scripts.

Updated

Where the file goes

Hooks are set in .claude/settings.json in your project (shared with the team), .claude/settings.local.json (just you) or ~/.claude/settings.json (all projects). The scripts they run usually live in .claude/hooks/.

Claude Code hooks templates: structure

1

Event

When the hook runs. PostToolUse runs after a tool, such as after an edit; PreToolUse runs before one and can block it. There are also events for prompts, session start and stop.

2

Matcher

Which tools trigger it, for example Edit|Write for file changes.

3

Command

The shell command to run. It receives details of the tool call as JSON on standard input.

4

Exit code

Exit 0 to continue. Exit 2 to send your message back to Claude Code so it fixes the problem.

A short example

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          { "type": "command", "command": "npx prettier --write ." }
        ]
      }
    ]
  }
}

Adding a Claude Code hook, step by step

Decide what must happen every time, not just usually: formatting every file, linting every change, blocking edits to generated files, or catching off-brand colours. If a rule needs judgement, it belongs in CLAUDE.md; if it must always run, it belongs in a hook.

Pick the event. PostToolUse after Edit and Write is the most common: it runs right after Claude Code changes a file. PreToolUse runs before a tool and can block it, which is how you protect files Claude Code should never touch.

Write a small script that reads the JSON from standard input, takes the file path, checks only that file and exits. Exit 0 to continue; exit 2 with a message on standard error to send the problem back to Claude Code so it fixes it itself.

Register it in .claude/settings.json, commit the script in .claude/hooks/, and test it by asking Claude Code to make a change that should trigger it.

One more tip: start with a single PostToolUse hook for formatting, live with it for a week, then add the design check. Hooks that fire on every edit are powerful, and adding them one at a time makes it easy to see which one causes a problem if something slows down.

Ready-made Claude Code hooks templates files

Complete files you can copy into your project and fill in. Each one works with the BrowserMoon design templates, so what the tool builds also looks professional.

Design check hook

A Claude Code hook that runs after every edit and warns when a change adds raw hex colours or new fonts, so off-brand styles never slip in.

.claude/settings.json (hook)
Add this to .claude/settings.json in your project. After Claude Code edits or writes a file, it scans the changed file for raw hex colours and font families that are not your tokens, and reports them back to Claude Code so it fixes them.

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",

Format and lint hook

A Claude Code hook that formats every file Claude edits with Prettier and runs ESLint on it, so style issues are fixed before you review.

.claude/settings.json (format hook)
Add this to .claude/settings.json. After every edit, it formats the changed file with Prettier and lints it with ESLint. Lint errors are sent back to Claude Code to fix.

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",

Using Claude Code hooks with a design template

Hooks are how you enforce a design system. The design check hook scans every edited file for raw hex colours and font families, so off-brand styles are caught the moment they are written, not in review.

Instructions ask Claude Code to follow the template; a hook makes sure it did.

SaaS landing page

Website template

Analytics dashboard

Website template

Pricing section

Website template

Dark gradient hero

Website template

Account settings

Website template

AI chat interface

Website template

SaaS landing page · Analytics dashboard · Pricing section · Dark gradient hero · Account settings · AI chat interface

Best practices

  • ·Use hooks for rules that must always hold. Use CLAUDE.md for rules that need judgement.
  • ·Read the file path from the JSON input and check only the changed file, so hooks stay fast.
  • ·Exit with code 2 and a clear message to make Claude Code fix the problem itself.
  • ·Keep hook scripts in .claude/hooks/ and commit them, so the whole team gets them.

Common mistakes and how to fix them

Slow hooks that check the whole repo

Read the file path from the input and check only that file.

Silent failures

Exit with code 2 and a clear message so Claude Code knows what to fix.

Hooks only on one machine

Put them in the project .claude/settings.json and commit the scripts.

Using hooks for judgement calls

Keep style advice in CLAUDE.md; use hooks for rules a script can check.

Hooks vs CLAUDE.md rules

RunsHook: always, automaticallyCLAUDE.md: when Claude Code remembers to follow it
Can blockHook: yes, with PreToolUseCLAUDE.md: no
Best forFormatting, linting, protected files, token checksConventions that need judgement

These files tell Claude Code how to work. A design template tells it what to build. Use both.

Claude Code templates

Frequently asked questions

What are Claude Code hooks?

Shell commands that run automatically at set points, like after a file edit. They enforce rules every time, which instructions cannot guarantee.

Where are Claude Code hooks configured?

In the hooks section of .claude/settings.json, .claude/settings.local.json or ~/.claude/settings.json.

How does a hook send feedback to Claude Code?

Exit with code 2 and write the message to standard error. Claude Code reads it and acts on it.

Can hooks block an action?

Yes. A PreToolUse hook that exits with code 2 blocks the tool call and tells Claude Code why.

Can I see what a hook did?

Yes. Run Claude Code with verbose output or check the transcript; hook output and exit codes are shown there, which helps when a hook blocks something unexpectedly.

Which hook events are there?

The main ones run before and after tool calls, when you submit a prompt, when a session starts and when Claude Code stops. PostToolUse and PreToolUse are the most used.

Can a hook run Prettier automatically?

Yes. The format and lint hook on this page runs Prettier on every edited file and ESLint on code files.

Are hooks safe?

They run shell commands with your permissions, so only add scripts you have read, and keep them in the repo where they can be reviewed.

Do hooks slow Claude Code down?

Only if they do a lot of work. Checking just the changed file keeps them fast.

Claude Code templates by category

Claude Code hero templatesClaude Code navigation templatesClaude Code features templatesClaude Code footer templatesClaude Code pricing templatesClaude Code stats templatesClaude Code testimonials templatesClaude Code CTA templatesClaude Code card templatesClaude Code form templatesClaude Code modal templatesClaude Code animation templatesClaude Code dark mode templatesClaude Code minimal templatesClaude Code logo templatesClaude Code slider templates

Related

Claude Code templatesCLAUDE.md templateClaude Code skills templatesClaude Code agents templatesClaude Code commands templatesClaude Code MCP templatesVibe coding design guideDesign system for vibe codingWhy vibe-coded websites look cheapHow to build a website with AIAll guides