Skip to main content
skill CX Codex

doherty-threshold — Claude Code skill: install and use

This skill sets response-time targets for interface interactions and suggests feedback patterns when a wait cannot be avoided.

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

What doherty-threshold does

doherty-threshold reviews delays people notice in transitions, search, filtering, autocomplete, and button presses. It treats 400ms as the outer limit for an interaction expected to feel immediate, while button state changes target 100ms.

When completion cannot fit within 400ms, the skill calls for an immediate visual acknowledgement on the triggering element. It uses a loading indicator for waits of 400ms–3s and progress feedback beyond 3s. For content with a known layout, it prefers skeleton screens to spinners.

Measure interaction latency on target devices and network conditions, because development-only measurements miss what users perceive. That makes this a prompt to inspect frequent interactions before tuning motion.

What it helps with

  • find interactions with noticeable latency
  • set a 400ms response budget
  • choose feedback for a long-running request
  • define button feedback within 100ms
  • use skeleton screens for known content layouts

Example prompts for the agent

  • "Review tab-switching delays using doherty-threshold."
  • "Set response-time budgets for search and filters with doherty-threshold."
  • "Using doherty-threshold, decide what feedback to show for an action taking more than 3s."

How to install doherty-threshold

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill doherty-threshold -a claude-code

2Manually: put the files in place

~/.claude/skills/doherty-threshold/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/doherty-threshold/

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

Questions about doherty-threshold

How do I install doherty-threshold in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill doherty-threshold -a claude-code.

What does doherty-threshold do?

It applies the Doherty Threshold to perceived interface performance. The skill helps set latency targets and choose feedback for unavoidable waits.

What should happen when an action takes longer than 400ms?

Change the triggering element's visual state immediately. Use a loading indicator for 400ms–3s, then show progress after 3s.

Source text

SKILL.md · MIT
---
name: doherty-threshold
description: Apply the Doherty Threshold — keep system response under 400ms to preserve user flow. Use when diagnosing perceived slowness or setting a performance budget. For what to show during unavoidable waits, use `loading-states`.
---
# Doherty Threshold
You are an expert in perceived performance and the design of responsive, flow-preserving interfaces.
## What You Do
You apply the Doherty Threshold to identify where response latency breaks user flow, and design feedback patterns and technical targets to keep interactions feeling immediate.
## The Principle
Walter Doherty and Ahrvind Thadani (IBM, 1982) established that when a computer responds to a user action in **under 400ms**, productivity increases substantially — users stay in flow rather than losing their train of thought or shifting attention. Above this threshold, users notice the wait and their cognitive engagement with the task degrades.
**The key thresholds:**
| Response time | User perception |
|---|---|
| 0–100ms | Instant — the system feels like a direct extension of the action |
| 100–300ms | Fast — perceptible but not disruptive |
| 300–400ms | Approaching the boundary — some users notice |
| 400ms–1s | Slow — users are aware of waiting; a response indicator is needed |
| 1s+ | Definitely slow — progress feedback required; flow is broken |
| 10s+ | Task-level disruption — users switch context |
## Design Applications
### Where Sub-400ms Matters Most
- **Slide and view transitions**: switching between screens or slides should complete in under 400ms; beyond this, the transition itself becomes a wait
- **Inline interactions**: toggles, checkboxes, dropdowns, tab switches — all should feel immediate
- **Search and filter**: results should begin appearing before 400ms; if not, show a skeleton or spinner immediately
- **Autocomplete**: first suggestions should appear within 300ms of typing
- **Button feedback**: visual state change on press must happen within 100ms, regardless of whether the underlying action completes
### When You Cannot Meet the Threshold
If the system genuinely cannot respond in under 400ms:
1. **Acknowledge immediately** (within 100ms) with a visual state change on the triggering element
2. **Show a loading indicator** if completion will take 400ms–3s
3. **Show progress** (not just a spinner) if completion will take more than 3s
4. **Optimistic UI**: update the interface immediately, reconcile with the server response when it arrives
5. **Skeleton screens**: preferred over spinners for content that has a known layout — they maintain spatial context and feel faster
## What the Doherty Threshold Is Not
- It is not a strict empirical threshold beyond which all productivity is lost — it is a design target that emerged from observed productivity patterns in terminal systems
- It does not mean that animations and transitions must be under 400ms total; a deliberate 250ms entrance animation is fine. The threshold applies to **perceived wait time**, not to intentional motion
- Modern applications with complex data fetching will sometimes exceed it; the goal is to minimize the perception of waiting through feedback design, not to guarantee sub-400ms API responses
## Best Practices
- Measure real interaction latency on target devices and network conditions, not just in development
- Treat 400ms as the outer bound for any interaction that a user expects to be immediate
- Never show a loading state for actions that complete under 400ms — the flash of a spinner is itself disruptive
- Prioritize latency budgets for the interactions users take most frequently
- Pair response time optimization with motion design: a well-timed 200ms transition feels fast; an abrupt 50ms flash can feel broken

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

Similar skills

Everything for Design →

From the same set111

design-negotiation Helps designers advocate for UX quality, scope, and timelines when negotiating with PMs and engineers using evidence instead of personal taste. CX Codex +1 1,700installs design-impact-reporting Turns design work into a report leadership can read: user, product and business metrics with the evidence behind them. CX Codex +1 1,700installs critique-information-density A skill that critiques a rendered screen's density: cognitive load, content priority, scanning patterns and progressive disclosure. Useful when a screen feels overwhelming. CX Codex +1 1,700installs research-repository Helps teams organize UX findings into a structured repository so research insights stay searchable, reusable, and linked to evidence. CX Codex +1 1,700installs content-strategy Works out what content a product needs, where it lives and who owns it. Useful when the content itself is the problem, not the layout. CX Codex +1 1,700installs millers-law Chunks interface elements into groups of about four to fit working memory limits. Useful when structuring navigation menus, onboarding flows, and form sections. CX Codex +1 1,700installs design-system-governance This skill lays out how a design system changes over time: ownership, contribution, versioning, deprecation. It fits teams where more than one group ships components. CX Codex +1 1,700installs design-debt-audit Takes stock of accumulated design inconsistencies across a product and returns a prioritised fix plan. Useful once drift has built up over time. CX Codex +1 1,700installs

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