microinteractions

Malicious tool definition detected

Tool: SKILL.md [1/3] Description: --- name: microinteractions description: 'Design the small details — triggers, rules, feedback, loops and modes — that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", or "interaction polish".

Tool: SKILL.md [2/3] Description: the right time makes interactions feel responsive, trustworthy, and alive. **Key insights:** - Feedback must be immediate -- under 100ms for direct manipulation - Use the least noticeable feedback that still communicates: a subtle color change before a modal dialog - Feedback should map to the significance of the event: small action = small feedback, big result = big feedback - Visual feedback is primary; audio and haptic are supplementary and should never be th

Tool: SKILL.md [3/3] Description: where possible - Use progressive disclosure: show simple first, reveal complexity only when requested - Avoid "settings within settings" -- if a microinteraction has its own preferences, reconsider - The number of rules should be proportional to the frequency of use: common actions need few rules **Product applications:** | Context | Application | Example | |---------|-------------|---------| | **Smart defaults** | Eliminate configuration | Camera app defaults t

Malicious tool definition detected

Tool: references/case-studies.md [1/3] Description: # Microinteraction Case Studies Detailed design breakdowns of common UI patterns, analyzed through the four-part microinteraction structure: Trigger, Rules, Feedback, and Loops & Modes.

Tool: references/case-studies.md [2/3] Description: sure?" | | Toggle server failure | Revert toggle; show inline error for 3 seconds | | Rapid toggling | Debounce 500ms; only send final state to server | | Toggle with dependent toggles | Child toggles disable when parent turns off | --- ## Case Study 3: Pull-to-Refresh Pull-to-refresh is a gesture-triggered microinteraction invented by Loren Brichter for Tweetie (acquired by Twitter). It transforms a natural gesture (pulling down on a list) int

Tool: references/case-studies.md [3/3] Description: turns red; stops at current position | "Upload failed at 47%.

Malicious tool definition detected

Tool: references/feedback-patterns.md [1/3] Description: # Feedback Patterns for Microinteractions Feedback is how a microinteraction communicates its rules to the user.

Tool: references/feedback-patterns.md [2/3] Description: product interaction (keyboard typing) | Any action that occurs frequently (> 10x/min) | ### Audio Feedback Design Rules **1. Short.** Sounds should be 50-200ms for confirmations, up to 1 second for completions.

Tool: references/feedback-patterns.md [3/3] Description: for actions user may want to undo | | Interface feels "jittery" | Too many animations on trivial events | Remove animation from hover/focus; keep for state changes | | Users disable notifications | Every event sends a push notification | Tier notifications; only push for high-priority events | | Sound becomes annoying | Every click has an audio cue | Remove audio from routine actions; keep for confirmations | | Screen reader users overwhel

Malicious tool definition detected

Tool: references/loops-modes.md [1/3] Description: # Loops and Modes in Microinteractions Loops and modes are the long-term behavior of microinteractions. While triggers, rules, and feedback handle the moment-to-moment experience, loops and modes determine how an interaction evolves over time and how it adapts to different contexts.

Tool: references/loops-modes.md [2/3] Description: | **Mode amnesia** | User forgets they entered a mode | Left phone in Do Not Disturb; missed urgent calls | | **Action inconsistency** | Same trigger does different things | Click selects text in edit mode, follows link in view mode | ### When Modes Are Justified Despite their dangers, modes are sometimes the right design choice: | Justification | Why It Works | Example | |--------------|-------------|---------| | **Physical constraints** | Limi

Tool: references/loops-modes.md [3/3] Description: | **Mode escape** | Mode selector always visible in toolbar | ### Smart Thermostat (Nest) | Aspect | Design | |--------|--------| | **Loop type** | Temperature check loop: every 5 minutes | | **Long loop** | Learns schedule over 2 weeks; adapts set-points automatically | | **Modes** | Home, Away, Eco, Manual override | | **Mode indicator** | Leaf icon (eco), "Away" text, temperature display | | **Mode escape** | Manual adjustment exits Away/Eco

Malicious tool definition detected

Tool: references/rules-and-state.md [1/3] Description: # Rules and State in Microinteractions Rules are the invisible engine of a microinteraction. Once a trigger fires, rules determine what happens: what changes, in what order, with what constraints, and when the interaction ends.

Tool: references/rules-and-state.md [2/3] Description: | Date picker control that only allows valid dates | | "That username is taken" after submitting form | Real-time availability check as user types | | "File too large" error after waiting for upload | Show size limit upfront; disable upload for oversized files | | "Cannot select past dates" error message | Gray out and disable past dates in calendar | ### Communicating Constraints | Method | When to Use | Example | |--------|-------------|--

Tool: references/rules-and-state.md [3/3] Description: Creates bad records, user confusion | Client-side validation before submission | | **Exceeding rate limits** | Overloads system, degrades experience | Throttle triggers; show "Try again in X seconds" | | **Conflicting selections** | Logical impossibility (depart after arrive) | Disable impossible options based on other selections | | **Accidental mode entry** | User does not realize they changed context | Require deliberate action (not hover

Malicious tool definition detected

Tool: references/signature-moments.md [1/3] Description: # Signature Moments in Microinteractions A signature moment is a microinteraction so distinctive, so perfectly crafted, that it becomes inseparable from the product's identity.

Tool: references/signature-moments.md [2/3] Description: add friction) | Twitter/X pull-to-refresh, Instagram double-tap | | **Error states** | Opportunity to show grace and personality | Medium (must still communicate error) | GitHub 404, Tumblr "Nothing here" illustrations | ### Low-Opportunity Locations (Avoid Signature Investment) | Location | Why to Avoid | What to Do Instead | |----------|-------------|-------------------| | **Settings pages** | Infrequent, utilitarian | Standard controls,

Tool: references/signature-moments.md [3/3] Description: moment does not extend interaction time | | **Trying too hard** | Every interaction is "delightful" resulting in sensory overload | Limit to 2-3 signature moments in the entire product | | **Cultural blind spots** | Humor or imagery that does not translate | Test with diverse user groups; avoid culturally specific references | | **Forgetting accessibility** | Signature moment relies on vision, motion, or hearing | Ensure core function work

Malicious tool definition detected

Tool: references/trigger-design.md [1/2] Description: # Trigger Design for Microinteractions A trigger is what initiates a microinteraction.

Tool: references/trigger-design.md [2/2] Description: | ### Additional States for Complex Triggers | State | When Used | Visual Treatment | Example | |-------|-----------|-----------------|---------| | **Focus** | Keyboard navigation | Focus ring or outline | Blue 2px outline on Tab focus | | **Selected/On** | Toggle or checkbox in active state | Filled, checked, or colored | Toggle thumb slides right, track turns green | | **Error** | Associated input has validation error | Red border, error ic