How to use the Click Path Audit agent skill

What the Click Path Audit skill makes the agent do

Standard debugging checks whether a function exists, whether it crashes, and whether it returns the right type. It does not check whether the final UI state matches what the button label promised, or whether one function quietly undoes what another just did.

The skill tells the agent to trace each button or touchpoint through its handler in order. For every call it notes which state is read, which is written, and whether any shared state is reset as a side effect. It then checks whether a later call cancels an earlier change, whether the final state matches the label, and whether async calls could resolve in the wrong order.

• Maps the side effects of every action in a state store (for example Zustand, Redux or React context).
• Traces handler call sequences step by step rather than checking each function in isolation.
• Flags actions that reset state they do not own.

Install the skill from the ZIP

Download the ZIP for click-path-audit from this page and unzip it. The package contains a single file, SKILL.md.

For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Project: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with a natural request

You do not need to type a special command. The skill describes itself as useful when systematic debugging has found a bug but the user still reports a broken button, or after a major refactor that touches a shared state store. Describe the symptom in plain words and point the agent at the relevant component or store.

The skill is also labelled /click-path-audit in its title, so you can refer to it by that name if your setup supports it.

• "The New Email button seems to do nothing. Audit its click path."
• "I just refactored the Zustand store. Check the touchpoints in the compose flow for side effects."
• "Standard debugging found nothing, but Save still leaves the form in the wrong state. Trace the handler."

Example: a button that does nothing

The source describes a 'New Email' button that called setComposeMode(true) and then selectThread(null). Each function worked on its own. However, selectThread reset composeMode to false, so the button did nothing. Standard checks passed; the click path audit is designed to catch this kind of interaction.

The skill's first step is to build a map of store actions, listing what each one sets and what it resets. With that map, the hidden reset becomes visible before you test the button.

What the skill needs and what it does not do

The listing states that the skill requires nothing, runs no scripts and uses no network access. It is a set of written instructions for the agent, so it works by reading your source code.

The audit depends on the agent being able to read the relevant source files. It is not useful for projects without interactive UI or shared state, and it assumes you are comfortable with React-style handlers and state stores. It is not a general bug fixer for non-developers.

• Runs scripts: no
• Uses network: no
• Requires: nothing listed

Tips for getting useful results

Name the specific button, component and file where you can. The skill works touchpoint by touchpoint, so a narrow scope gives more precise findings. Include the store file if you use Zustand, Redux or React context, because the side-effect map depends on it.

Run the audit after a normal debugging pass has failed, not instead of one. Review each reported interaction yourself before changing code, since the agent is reasoning from source it reads.

• Give the button label, component name and file path.
• Include the shared store file when the bug involves state.
• Use it after a refactor that touches shared state as a regression check.