Cursor Micro-Interaction Polish Pass

Section-by-section polish pass: find the flat sections and give Claude one specific cursor interaction or animation per section, restrained not busy.

Web/UIwebui
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

PromptMy restaurant site works but feels flat and lifeless.
Beforegeneric AI agent
Adding micro-interactions can bring a site to life. Here are some ideas:

- **Hover effects** on buttons and cards — subtle scale or shadow changes
- **Scroll animations** — fade elements in as they enter the viewport
- **Parallax** on hero images for depth
- **Loading states** with skeleton screens
- **Cursor effects** — custom cursors or trailing elements
- **Transitions** between pages

Libraries like Framer Motion or GSAP make these easier to implement.

The key is subtlety — too many animations can feel overwhelming and hurt performance.

Would you like help implementing any of these?
Afterwith Cursor Micro-Interaction Polish Pass
Scrolled the site. Four sections read flat. One motion each — that's the
whole discipline, and it's what separates polish from a site that feels
like a demo reel.

SECTION AUDIT

  HERO — not flat. Leave it alone.
    The video already carries it. Adding motion here competes.

  RESERVE A TABLE — flat ✗
    → Ember glow follows the cursor across the section background.
      Warm radial, 240px, opacity 0.12, 120ms ease-out lag.
      Why here: it's the conversion section. Warmth at the exact moment
      of hesitation. Ref: 21st.dev spotlight-cursor.

  OUR STORY — flat ✗
    → Soft candle-light halo trails the cursor with deliberate lag —
      ~180ms, slower than feels natural. The lag is the point: it reads
      as candlelight rather than as a cursor effect.
      Opacity 0.08. If a visitor notices the effect, it's too strong.

  MENU — flat ✗
    → Dish rows only: the row lifts 2px and the price fades from
      --muted to --ink on hover. No image zoom, no card shadow.
      One property, one row.

  HOURS / LOCATION — flat, and it should stay flat ✓
    Utility content. Someone here is checking whether you're open.
    Motion is friction.

THE RULES THIS FOLLOWS
  One motion per section. A second one doesn't add polish, it adds
  noise, and the eye stops trusting any of them.
  Nothing above 0.15 opacity on ambient effects.
  Every effect gated on (hover: hover) and
  prefers-reduced-motion: no-preference. Cursor effects on touch are
  dead weight that still ships and still costs.

WHAT I'D CUT IF YOU ONLY DO ONE
The reserve-a-table ember. It's the section where feeling changes
behavior. The other three are refinement.

About this skill


name: cursor-microinteraction-polish-pass description: Section-by-section polish pass: find the flat sections and give Claude one specific cursor interaction or animation per section, restrained not busy.

Cursor Micro-Interaction Polish Pass

What This Does

The creator scrolls the site by hand, finds sections that feel static, and gives Claude one interaction per section, always restrained. Ember glow follows the cursor in the reserve-a-table section, a soft candle-light halo trails behind the cursor in the story section with a subtle lag.

What You Get

  • Section-flat-feel audit
  • one-motion-per-section discipline
  • cursor-follow micro interactions
  • 21st.dev component references
  • restraint-first rewrite loop

Customize

  • sections: which page regions to audit
  • motion_type: parallax, halo, glow, or word-reveal
  • lag_amount: how much motion trails the cursor
  • component_source: 21st.dev name or a custom prompt
  • restraint_bias: default to more subtle

Sample Output

The story section gets a subtle candle-light halo that lags behind the cursor and elevates the whole page from professional to expensive.

Target Audience

UI designers who want the last 20 percent that makes a site feel premium

SKILL.md preview

SKILL.md
---
name: cursor-microinteraction-polish-pass
description: Use this skill when a built site feels flat and needs a targeted pass of restrained cursor-driven interactions, one per section.
version: 1.0.0
category: Web/UI
author: AgentVolt
license: proprietary
tags:
  - web
  - ui
  - standard
---

# Cursor Micro-Interaction Polish Pass

Walks a live site section by section and assigns exactly one restrained cursor interaction to each flat section, instead of blanketing the page in motion.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →