click-test-plan
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.
- Installs
- 2K
- Last 24h
- +22
- Trending rank
- #5556
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/designer-skills --skill click-test-plan- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads click-test-plan automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the click-test-plan skill do?
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.
How do I install click-test-plan?
Run npx skills add https://github.com/owl-listener/designer-skills --skill click-test-plan in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/click-test-plan/ (personal) or .claude/skills/click-test-plan/ (project).
Which AI agents can use click-test-plan?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is click-test-plan safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains click-test-plan?
It is published by owl-listener in owl-listener/designer-skills. It has 2,045 recorded installs.
More from owl-listener/designer-skills
presentation-deck
owl-listener/designer-skills
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.
typography-scale
owl-listener/designer-skills
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
illustration-style
owl-listener/designer-skills
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).
visual-hierarchy
owl-listener/designer-skills
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
color-system
owl-listener/designer-skills
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).
dark-mode-design
owl-listener/designer-skills
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work