finesse
finesse is a design-engineering skill for AI coding agents. It packages the invisible details that make interfaces feel polished, fast, and physical: motion, interaction states, surfaces, typography, performance, and accessibility, all as committed defaults the agent reaches for without being asked.
To show what that is worth, I gave Opus 4.8 the same prompt fifteen times. The only thing that changed was whether it read finesse first. Each pair below is the same component, built twice. Step through them and interact with both.
Add it to your coding agent. Copy the command and paste it into Claude Code, Codex, or Cursor:
A modal that confirms before it closes
Open and close it a few times. One leaves exactly as slowly as it arrives. The other exits a tier faster, and turns the button into a spinner, then a check, right where you clicked.
A stack that fans out when you reach for it
Spam the trigger. One stack replays its animation from frame zero on every click. The other re-stacks mid-flight and fans open when you hover.
A skeleton that knows when not to flash
Click reload over and over. One flashes a loader every time, even on a fast load. The other waits to see if the load is slow enough to bother, and it can actually fail.
A switch that crossfades day into night, without smearing every pixel
Flip it. One transitions every color on the panel at once, and that slowness leaks into ordinary hovers. The other crossfades once, then snaps hover and press back to instant.
A toggle that flips instantly, then tells you if it actually saved
Both flip with a satisfying knob. Only one simulates the save, then visibly rolls back when it fails.
A pricing card you can actually use, not just look at
At rest they look like twins. Then click the button and switch the billing period. One has a real loading and success flow with a price that rolls in place. The other has a bounce.
A palette that confirms in place, instead of shaking and toasting
Run a command. One throws a confirmation across the whole panel and shakes on an empty result. The other confirms right at the row you acted on, and never animates a keystroke.
A call to action that responds, not one that just looks good
Both look great. Then press the primary button. One runs a real loading and done state. The other is a nice animation over a dead link.
A copy button that is honest about failure
Click copy and both feel good on the happy path. Block the clipboard and one shows a clear Failed state with an icon and a label. The other fails silently.
A segmented control that answers your press
Press and hold a tab. One gives under your finger and answers the press. The other only moves the indicator.
Validation that forgives while you type
Type a bad email, tab away, then fix it one character at a time. One shows a checkmark when it is valid and never scolds a field you only tabbed through.
A live counter whose polish survives rapid clicks
Click as fast as you can. One retargets the rolling digits cleanly. The other can stutter or snap on the carry.
A dropdown that closes faster than it opens
Open and close the menu a few times. One clears faster than it opens. The other feels symmetric.
A like that answers on touch, not on release
Press and hold the heart without releasing. One fills instantly on press. The other waits for you to let go.
Directional easing on collapse, where the baseline already did the hard parts
Open and close a row. The gap here is small. finesse leaves on a slightly faster ease than it arrives. The baseline already nailed most of it.
Each demo is a self-contained page built with vanilla HTML, CSS, and JS, with no framework and no build step, loaded here in its own frame. Source on GitHub.