Microinteraction Anti-Patterns in Hallmark's Slop Test: The Complete Guide

Hallmark's Slop Test identifies nine specific microinteraction anti-patterns (gates 10–18) that degrade UI performance, accessibility, and visual polish, including indiscriminate transition-all usage, overshoot easing curves, and layout-affecting animations.

The Nutlope/hallmark repository includes a rigorous Slop Test designed to eliminate "sloppy" UI code. Within the test's microinteraction section—specifically gates 10 through 18 defined in skills/hallmark/references/slop-test.md—the framework targets CSS transitions, hover effects, and animations that create jank, accessibility barriers, or visual inconsistency. Understanding these microinteraction anti-patterns helps developers build interfaces that feel responsive, intentional, and professionally polished.

CSS Transition Anti-Patterns

Gates 10, 12, 14, and 15 focus on improper use of CSS transitions that impact performance or accessibility.

Indiscriminate Transition-All Usage (Gate 10)

Using transition: all without enumerating specific properties triggers Gate 10. This anti-pattern forces the browser to watch and interpolate every animatable property, wasting resources and creating unintended side effects.

According to the source code in skills/hallmark/references/slop-test.md (lines 45–46), the test flags any rule applying a blanket transition-all.

Bad example (fails):

.button {
  transition: all 0.3s ease;
}

Good example (passes):

.button {
  transition: background-color 0.3s, transform 0.3s;
}

Overshoot Easing Curves (Gate 12)

Bouncy or overshoot easing on UI state changes violates Gate 12. The test looks for cubic-bezier curves such as cubic-bezier(0.34, 1.56, 0.64, 1) applied to buttons, modals, or tooltips, which create distracting, unprofessional motion.

As implemented in skills/hallmark/references/slop-test.md (lines 48–49), this gate ensures UI elements settle into place without elastic rebounding.

Bad example (fails):

.toast {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Good example (passes):

.toast {
  transition: transform 0.4s ease-out;
}

Animating Layout Properties (Gate 14)

Animating layout-affecting properties such as width, height, top, left, margin, or padding triggers Gate 14. These properties force the browser to recalculate layout (reflow) on every animation frame, causing jank and performance degradation.

The test in skills/hallmark/references/slop-test.md (lines 50–51) flags any keyframe or transition targeting these expensive properties.

Bad example (fails):

.panel {
  animation: expand 0.5s forwards;
}

@keyframes expand {
  from { width: 0; }
  to { width: 200px; }
}

Good example (passes):

.panel {
  animation: fade-in 0.5s forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

Focus Ring Fade-In (Gate 15)

Transitioning the appearance of focus rings violates Gate 15. Focus indicators must appear instantly to support keyboard navigation; any transition that delays their visibility creates accessibility barriers for users relying on keyboard traversal.

According to skills/hallmark/references/slop-test.md (lines 51–52), focus rings should render immediately without CSS transitions.

Bad example (fails):

.button:focus-visible {
  transition: outline 0.2s;
  outline: 2px solid var(--color-focus);
}

Good example (passes):

.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

Hover Effect Anti-Patterns

Gates 11 and 13 address redundant or excessive hover transformations that dilute visual hierarchy.

Uniform Hover Scale Reuse (Gate 11)

Applying identical hover-scale utilities across unrelated elements triggers Gate 11. When hover:scale-105 appears on cards, buttons, and icons without differentiation, the interface feels templated and monotonous.

The test defined in skills/hallmark/references/slop-test.md (lines 47–48) detects this pattern by tracking repeated scale values across component boundaries.

Bad example (fails):

<div class="card hover:scale-105">…</div>
<button class="hover:scale-105">…</button>

Good example (passes):

<div class="card hover:scale-105">…</div>
<button class="hover:scale-110">…</button>

Multiple Simultaneous Transformations (Gate 13)

Combining several hover-state transformations on a single element violates Gate 13. The test checks for elements stacking translate, scale, shadow, color, and rotate effects simultaneously, which creates visual noise and cognitive overload.

As documented in skills/hallmark/references/slop-test.md (lines 49–50), limit hover effects to one or two complementary properties.

Bad example (fails):

.icon {
  hover:scale-105;
  hover:rotate-6;
  hover:shadow-lg;
}

Good example (passes):

.icon {
  hover:scale-105;
}

Accessibility and Timing Anti-Patterns

Gates 16, 17, and 18 enforce accessibility standards and appropriate timing for interactive elements.

Redundant Success Toasts (Gate 16)

Displaying success toasts for already visible actions triggers Gate 16. When the UI already shows a checkmark or state change, an additional toast notification creates unnecessary distraction and violates the principle of calm technology.

The test in skills/hallmark/references/slop-test.md (lines 52–53) reserves toast notifications for failures or invisible background processes only.

Bad example (fails):

showToast('Saved!'); // UI already shows check-mark

Good example (passes):

// No toast needed because the check-mark is visible

Mismatched Hover and Focus Delays (Gate 17)

Using equal delay values for hover and focus states violates Gate 17. The test enforces a longer hover delay (800–1000ms) while requiring focus delay to be 0ms, preventing keyboard users from waiting unnecessarily for tooltip or menu appearance.

According to skills/hallmark/references/slop-test.md (lines 53–54), these timing differences ensure equitable access for pointer and keyboard users.

Bad example (fails):

tooltip.setDelay(800);
tooltip.setFocusDelay(800);

Good example (passes):

tooltip.setDelay(900);
tooltip.setFocusDelay(0);

Non-Pausable Auto-Rotating Content (Gate 18)

Auto-rotating carousels, banners, or statistics without pause-on-hover/focus triggers Gate 18. This anti-pattern violates WCAG 2.2.2 by preventing users from controlling moving content, which can distract users with cognitive disabilities or vestibular disorders.

The test in skills/hallmark/references/slop-test.md (lines 54–55) requires all rotating UI to respect user control by pausing on hover or focus.

Bad example (fails):

<div class="carousel" data-autoplay="true">…</div>

Good example (passes):

<div class="carousel" data-autoplay="true" data-pause-on-hover="true">…</div>

Summary

Hallmark's Slop Test microinteraction gates (10–18) guard against specific UI anti-patterns that degrade quality:

• Performance: Avoid transition-all, layout-property animations, and overshoot easing that cause jank and unnecessary reflows.
• Visual Consistency: Eliminate uniform hover scales across unrelated components and limit simultaneous hover transformations to prevent visual clutter.
• Accessibility: Ensure focus rings appear instantly, tooltips respect keyboard users with zero focus delay, and auto-rotating content respects WCAG pause requirements.
• Information Architecture: Remove redundant success toasts when the UI already communicates state changes visibly.

Frequently Asked Questions

What is Hallmark's Slop Test?

Hallmark's Slop Test is a comprehensive code quality framework defined in skills/hallmark/references/slop-test.md within the Nutlope/hallmark repository. It consists of 58 gates (including nine microinteraction-specific gates numbered 10–18) that automatically detect UI anti-patterns, performance issues, and accessibility violations in frontend codebases.

Why do layout-property animations hurt performance?

Animating properties like width, height, margin, or top forces the browser to recalculate the layout geometry of the page on every animation frame—a process called reflow. This computational expense blocks the main thread, causing frame drops and jank, whereas animating transform or opacity leverages the GPU without layout recalculation.

How should I implement focus indicators to pass Gate 15?

Focus indicators must appear instantly without CSS transitions. Apply the outline property (or equivalent focus ring) directly in the :focus-visible pseudo-class without transition properties or animation delays. This ensures keyboard users receive immediate visual feedback when navigating through interactive elements.

What is the correct timing ratio for hover versus focus delays?

According to Gate 17, hover delays should range between 800–1000ms to prevent accidental triggering, while focus delays must remain at 0ms. This asymmetry accommodates the precision of keyboard navigation versus the potential accidental hovering of pointer devices, ensuring neither user group experiences unnecessary latency.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}