From formal-verify
Design intuitive, meaningful interactions grounded in user goals and cognitive principles. Use when designing component behaviors, user flows, feedback systems, error handling, loading states, transitions, accessibility, keyboard navigation, touch/gesture interactions, or when evaluating interaction quality. Also use for modal vs modeless decisions, direct manipulation patterns, input device considerations, emotional/dramatic aspects of UX, or when asked about making interfaces feel responsive, humane, and goal-directed.
npx claudepluginhub petekp/agent-skills --plugin literate-guideThis skill uses the workspace's default tool permissions.
Design interactions that help real people accomplish real goals with minimum friction and maximum meaning.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Design interactions that help real people accomplish real goals with minimum friction and maximum meaning.
Before any pattern or timing value, ask: What is the user trying to accomplish, and how does this interaction help or hinder that goal?
Interaction design is not about mechanisms. It is about helping specific people achieve specific purposes while respecting their time, attention, and humanity.
## Interaction Spec: [Component Name]
### User Goal
What is the user trying to accomplish? What are the stakes?
### Conceptual Model
How should users understand this interaction? What mental model should they form?
### States & Transitions
| State | Appearance | Transition | Emotional Tone |
|-------|------------|------------|----------------|
| Default | [appearance] | — | [calm/ready/inviting] |
| Hover | [changes] | 150ms ease-out | [responsive/acknowledged] |
| Active | [pressed] | 50ms | [committed/engaged] |
| Loading | [feedback] | — | [progressing/patient] |
| Success | [confirmation] | 200ms | [accomplished/closure] |
| Error | [clear indication] | — | [recoverable/guided] |
### Keyboard & Input
- Tab: [focus behavior]
- Enter/Space: [activation]
- Escape: [reversal/dismissal]
- Touch: [gesture, target size]
### Error Prevention & Recovery
- How does design prevent errors?
- What happens when errors occur?
- How does user recover?
### Accessibility
- Screen reader announcement
- Focus management
- Reduced motion behavior
## Flow Analysis: [Journey Name]
### User Goal & Stakes
What does success mean? What does failure cost?
### Dramatic Arc
- Setup: How does user enter this flow?
- Rising action: What builds toward the goal?
- Climax: The moment of commitment/completion
- Resolution: Confirmation and next steps
### Steps
1. [Step] → [Interaction] → [User feeling]
### Friction Analysis
- Necessary friction (builds engagement/prevents errors)
- Excise to eliminate (work that doesn't serve the goal)
### Error Paths
- [Error scenario]: [Prevention] → [Recovery]
Users are not "operators" triggering state changes. They are people with purposes.
Ask first:
The perpetual intermediate: Most users are neither novices learning nor experts optimizing. They learned enough to work and won't learn more. Design for them—make the common path fast while keeping advanced options discoverable but unobtrusive.
Users must form accurate mental models of how the system works. The gap between the designer's model and the user's model is where confusion lives.
The system image (what users see and interact with) must accurately convey the designer's model. When users are confused, the system image has failed—not the user.
Signifiers communicate where action is possible and how to perform it. A drag handle icon is a signifier; the ability to drag is the affordance. Design signifiers that make affordances discoverable.
Make the computer disappear so users concentrate on their task.
Core properties:
The syntactic/semantic insight: Direct manipulation works because it operates at the semantic level (the problem domain) rather than requiring translation into syntactic commands. This reduces cognitive load by eliminating the translation step.
When direct manipulation is inappropriate:
Reversibility is not a feature—it is a psychological safety mechanism that transforms a system from intimidating to inviting.
Errors are usually design failures, not user failures.
Slips (execution errors): User intends correctly but acts wrong
Mistakes (intention errors): User forms wrong goal or plan
Design forcing functions:
See references/cognitive-foundations.md for error psychology and prevention patterns.
Every action deserves acknowledgment. Users should never wonder "Did that work?"
| Response Time | Perception | Design Response |
|---|---|---|
| <100ms | Instant | Direct result, no indicator |
| 100ms–1s | Brief delay | Subtle state change (cursor, opacity) |
| 1–10s | Noticeable wait | Spinner or determinate progress |
| >10s | Long operation | Progress bar, estimate, allow cancel |
Optimistic UI: Update immediately, reconcile errors gracefully. But be honest—don't show success before confirming it for important actions.
Modes cause errors when users forget which mode they're in. But modes also isolate cognitive scope and can reduce errors when users would otherwise forget context.
Use modeless design (inspectors, inline editing) when:
Accept modality when:
If you must use modes:
Interactions are not just efficient or inefficient—they carry meaning.
Visceral level: Immediate emotional response to appearance Behavioral level: Pleasure or frustration from use Reflective level: What the experience means, how it's remembered
A loading state that builds anticipation differs from one that frustrates—same mechanism, different meaning. Consider:
See references/goals-and-context.md for dramatic structure and emotional design.
| Use Frequency | Recommended Activation | Rationale |
|---|---|---|
| Constant | Always visible (spatial) | Zero activation cost |
| Frequent | Keyboard shortcut + visible control | Fast for regulars, discoverable for others |
| Occasional | Menu or command palette | Saves space, still findable |
| Rare/Dangerous | Menu only, possibly nested | Prevents accidents |
Animation serves purposes—it is not decoration.
Animate when:
Don't animate when:
See references/animation-timing.md for timing, curves, and emotional qualities.
Not all friction is bad. Distinguish:
Excise (eliminate): Work that doesn't serve user's goal
Productive friction (consider keeping):
The device shapes the interaction. A finger on glass is not a stylus is not a mouse.
| Platform | Minimum | Comfortable |
|---|---|---|
| iOS | 44×44pt | 48pt+ |
| Android | 48×48dp | 56dp+ |
| Web (touch) | 44×44px | 48px+ |
| Gesture | Use | Considerations |
|---|---|---|
| Tap | Primary action | Clear affordance required |
| Long-press | Secondary/context | Needs discoverability hint |
| Swipe | Reveal, delete, navigate | Always provide undo; don't hide primary actions |
| Pinch | Zoom | Maintain focus under fingers |
When designing for tablets or considering desktop power users:
See references/input-and-physicality.md for device-specific patterns and haptics.
prefers-reduced-motion❌ Modal dialog with Preview button ✓ Live preview as user adjusts
❌ Must click Apply to see changes ✓ Changes visible immediately, undo available
❌ Current mode only in status bar ✓ Mode visible at locus of attention
❌ Unsaved changes with no indicator ✓ Clear dirty state (title, dot, changed button)
❌ Confirmation for every action ✓ Undo support; confirm only destructive/irreversible
❌ Animation that user must wait through ✓ Animation user can interrupt or that doesn't block
❌ All options visible at once ✓ Progressive disclosure based on task stage
❌ Error messages that blame user ✓ Clear explanation + recovery path
Load these as needed for detailed guidance: