Skip to main content
skill CX Codex

click-test-plan — Claude Code skill: plan click and findability tests

Turns a findability question into a test plan: where users click first and whether they locate items in your navigation. Useful when a design is ready but untested.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Owl-Listener/designer-skills --skill click-test-plan -a claude-code
Open on GitHub

What click-test-plan does

The skill structures four kinds of checks: first-click, full click path, navigation, and five-second recall. Each one comes back as a plan with an objective, stimuli, tasks, success criteria and participant count.

Tasks are written without UI hints, and click target areas get defined before testing starts. For quantitative runs the skill suggests 20 to 50 participants, and treats a first-click success rate above 65% as a sign of good findability. That number is a benchmark, not a gate — if your results land well under it, the navigation likely needs work.

A separate test-scenario skill in the same repository covers full task-based observation; this one stays on clicks. Install runs through npx skills add, so Node.js is required.

What it helps with

  • plan a first-click test around a screen design
  • check whether users find a section through the nav
  • compare two design variants on identical tasks
  • set success criteria before running the test
  • spot where users hesitate before clicking

Example prompts for the agent

  • draft a click test plan for the new settings page
  • test whether users find the email change option — first-click only
  • compare two navigation variants using the same tasks

How to install click-test-plan

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill click-test-plan -a claude-code

2Manually: put the files in place

~/.claude/skills/click-test-plan/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/click-test-plan/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about click-test-plan

How do I install click-test-plan in Claude?

Run npx skills add Owl-Listener/designer-skills --skill click-test-plan -a claude-code. The skill lands at ~/.claude/skills/click-test-plan/SKILL.md.

What does click-test-plan do?

It designs first-click, click-path, navigation and five-second tests. Each plan includes an objective, stimuli, tasks, success criteria and participant requirements.

How is it different from test-scenario?

click-test-plan covers clicks and element findability only. For full task-based observation, use test-scenario.

Source text

SKILL.md · MIT
---
name: click-test-plan
description: Design first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.
---
# Click Test Plan
You are an expert in designing click tests that evaluate findability and navigation clarity.
## What You Do
You design first-click and click tests that measure whether users can find information and features.
## Test Types
- **First-click test**: Where do users click first for a given task?
- **Click-path test**: Full sequence of clicks to complete a task
- **Navigation test**: Can users find items using the nav structure?
- **Five-second test**: What do users remember after 5 seconds?
## Test Plan Structure
### 1. Objective
What navigation or findability question are you answering?
### 2. Stimuli
Screen designs or prototypes to test. Identify which pages/states to show.
### 3. Tasks
Clear, goal-oriented tasks without UI hints. Example: 'Where would you click to change your email address?'
### 4. Success Criteria
- Correct first click (target area defined)
- Time to first click
- Confidence rating
- Click distribution heat map
### 5. Participants
Number needed (typically 20-50 for quantitative), recruitment criteria, any segmentation.
## Analysis
- First-click success rate (above 65% generally indicates good findability)
- Click distribution patterns
- Time analysis (hesitation indicates confusion)
- Confidence correlation with accuracy
## Best Practices
- Test one task per screen
- Define click target areas before testing
- Use realistic content, not lorem ipsum
- Don't give hints in task wording
- Compare alternative designs with same tasks

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →

From the same set109

ux-writing Writes microcopy, error messages, empty states and CTAs. Useful when the words themselves are the deliverable. CX Codex +1 2,200installs critique-typography Audits typography on a rendered screen: scale usage, readability, consistency and token compliance. Useful during UI review. CX Codex +1 2,000installs version-control-strategy Defines version control strategies for design files, component libraries, and tokens. It helps teams stop chaotic file history and establish clear release routines. CX Codex +1 2,000installs critique-visual-hierarchy This skill reviews a rendered screen across four dimensions and tells you where the eye actually lands. Useful when attention goes to the wrong place. CX Codex +1 2,000installs design-sprint-plan Plans structured design sprints to move from a challenge statement to a tested prototype in days. Ideal when you need to compress discovery work into a single week. CX Codex +1 2,000installs design-system-adoption Builds an adoption strategy and enablement materials when teams are bypassing an existing design system. It helps plan education, migration support and measurement. CX Codex +1 2,000installs team-workflow Designs an operating cadence for design teams, covering task tracking, regular rituals, and developer handoff. Helpful when day-to-day design collaboration lacks structure. CX Codex +1 2,000installs opportunity-framework Turns a pile of possible improvements into a ranked roadmap using impact-effort and RICE. Handy when ideas outnumber capacity. CX Codex +1 2,000installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor