eyepup
← All recipes
Claude Code~5 min

Pre-tool hook: surface top friction before any UX edit

When Claude Code is about to edit a UX file, this hook injects Eyepup's top three friction patterns into the agent's context. The agent now reasons about whether the edit it's about to make is the highest-impact one — and pauses to ask if there's a bigger fix waiting.

Step 1 — Auth Eyepup

$ npm i -g eyepup
$ eyepup login
$ cd your-app && eyepup install   # one-time snippet inject

Step 2 — Create the hook

Drop this in .claude/hooks/pre-tool-use.yml:

match:
  tool: edit
  paths:
    - "**/*.tsx"
    - "**/*.jsx"
    - "**/*.html"
    - "app/**"
    - "src/components/**"
run: |
  echo "▼ Eyepup top friction patterns (consider before editing):"
  eyepup todo --limit 3 || echo "(eyepup unavailable, continuing)"
  echo "▲"

Step 3 — Watch it work

Open Claude Code in your repo and ask for any UX edit. Right before the agent fires its edit tool, the hook runs and the agent sees something like:

▼ Eyepup top friction patterns (consider before editing):
1. Pricing Toggle Ambiguity (impact 12.0, 4 visitors)
   → Replace toggle with single annual/monthly card
2. Mobile Footer CTA Obscured (impact 9.0, 3 visitors)
   → Move CTA above the cookie banner on mobile
3. Insurance Coverage Hesitation (impact 6.0, 2 visitors)
   → Add an eligibility quick-check on /insurance
▲

Why this matters

Without the hook, the agent ships whatever you asked for — even if the request is "tweak the about page copy" while a 12-impact friction pattern is rotting on /pricing. With the hook in place, the agent has the priority list in scope and will often pause to ask whether the bigger fix should ship first.

The || echofailsafe is critical. If a teammate doesn't have eyepup installed, the hook prints a one-line warning and continues — the edit still fires, you just lose the priority context for that session.

Pair it with