delight

Add purposeful microcopy and subtle hover transitions to frontend interfaces.

Updated May 22, 2026
One-click install
npx skills add https://github.com/Nweremizu/ekklesia --skill delight-nweremizu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: delight
Source: https://github.com/Nweremizu/ekklesia/tree/main/.junie/skills/delight
Command: npx skills add https://github.com/Nweremizu/ekklesia --skill delight-nweremizu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you add purposeful moments of delight to product interfaces without slipping into decorative animation, gimmicks, or distracting motion.

Core Features & Use Cases

  • Microcopy specificity: Turn vague confirmations and empty states into small, memorable moments that feel human and clear.
  • Hover and state polish: Improve one target surface with coordinated hover choreography or subtle success transitions that reinforce the user's action.
  • Domain-aware signature details: Add a single, meaningful UI detail tied to the product context when the interface needs a standout moment.
  • Use case: A dashboard card, settings panel, or onboarding flow needs a tiny lift that makes the experience feel intentional and screenshot-worthy.

Quick Start

Use the delight skill to refine the requested UI surface with one tasteful, useful micro-interaction that stays subtle, on-brand, and accessible.

Frequently Asked Questions about delight

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add microinteractions to a UI without distracting users?

Microinteractions add UI joy without distraction by focusing on purposeful state transitions and hover choreography that reinforce user actions. This approach avoids decorative motion, respecting motion intensity limits to maintain interface clarity.

What is the best way to write microcopy for empty states?

Microcopy for empty states should transform vague confirmations into small, memorable moments that feel human and clear. The goal is to provide domain-aware, specific text that improves clarity without adding unnecessary visual noise.

Can I use bounce or confetti animations for frontend success states?

Bounce and confetti animations are explicitly avoided for frontend success states. Instead, you should apply subtle success transitions and coordinated hover choreography that provide a tasteful lift without becoming gimmicky or noisy.

Does accessible motion design require limiting animation intensity?

Accessible motion design requires strictly respecting motion intensity limits. It focuses on subtle state transitions and meaningful UI details tied to the product context rather than relying on decorative effects that could cause sensory overload.

How do I polish a dashboard card with subtle state transitions?

Polishing a dashboard card involves applying one tasteful, useful micro-interaction that stays on-brand and accessible. You improve the target surface with subtle success transitions or hover choreography that make the experience feel intentional.

When should I avoid decorative animation in product interfaces?

You should avoid decorative animation in product interfaces when it fails to reinforce the user's action or improve clarity. Purposeful UI delight requires domain-specific choices that bypass noisy effects for meaningful, screenshot-worthy details.