About delight
delight is a UI-polish sub-skill within ui-craft for design and development work. It selects copy, hover, transition, or signature-detail changes according to motion intensity, then edits the code.
Key features
- 01Add specificity to interface copy
- 02Create coordinated hover effects
- 03Add state transitions and micro-animations
- 04Gate changes by motion intensity
- 05Edit code and provide a review table
Use cases
- 01Make confirmation messages more specific
- 02Design hover feedback for a single card
- 03Add a subtle animation to an updated state
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/delightin Claude Code to confirm it loaded.
Details
From the project READMEContext: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Add delight to the UI at $ARGUMENTS. Load the ui-craft skill.
Delight is specificity, not decoration. The goal is one or two moments a user would screenshot — not confetti, not bounce, not emoji.
Candidates, ordered by safety (start at the top):
- Copy specificity — confirmation toasts name the thing ("3 members invited — Alex, Sam, Jordan", not "Invites sent"). Empty states with wit but no cringe ("Nothing here yet — add your first project" > "Oops! Looks like it's empty 😅").
- Hover choreography — multi-property hover (transform + color + shadow) that moves together on one shared duration/easing. One card, not every card.
- State transitions — optimistic UI + tiny success micro-animation (checkmark stroke draw, count-up on a number, subtle scale-and-settle on the updated row).
- One signature detail — custom list markers tied to the domain, asymmetric column offset on a single section, scroll-linked progress that tracks something real (reading progress, form completion).
Never add:
- Bounce easing (
cubic-bezier(0.68, -0.55, 0.27, 1.55)) — flagged in anti-slop. - Confetti on mundane actions (file saved, field updated).
- Emoji spam or "🎉 SUCCESS!" in ALL CAPS.
- Idle float/bob/shimmer on elements that aren't waiting for anything.
Knob gating (MOTION_INTENSITY):
≤ 3→ copy-only delight. No animated delight. Candidate 1 only.4-7→ copy + hover + state transitions (candidates 1-3).8+→ all four, including the signature detail.
References to read: references/motion.md (Decision Ladder + interaction rules), references/copy.md (microcopy voice), ../examples/animation-storyboard.md (if multi-stage).
Output: edit code directly. Print the Review Format table. Flag every candidate you chose not to add and why.
Next step: /finalize — delight is the last additive pass; gate it before shipping (rung 3).