Agent skill · design visual · sickn33
design-spells
Curated micro-interactions and design details that add "magic" and personality to websites and apps.
Why this skill is useful
Provides niche design patterns and micro-interaction techniques that enhance user experience beyond standard practices.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Design Spells Skill Design Spells is a collection of exceptional design details—micro-interactions, easter eggs, and clever UX patterns—that transform standard interfaces into memorable digital experiences. Context Use this skill specifically to elevate a UI from merely "functional" or "common" into something genuinely "magical." It focuses on the minute details that surprise and delight users, establishing a strong, premium brand personality. When to Use Trigger this skill when: Polishing a finished feature to actively add a "wow" factor. Designing unique interactions to replace standard web behaviors (e.g., clever hover states, creative loaders, surprising transitions). Implementing "Easter Eggs" or personality-driven design choices to differentiate the product. Looking to break away from generic, template-driven development. Execution Workflow 1. Identify Opportunity: Target the "boring" or "standard" parts of the interface (e.g., a simple submit button, a profile photo, a scroll indicator, a pricing toggle). 2. Research Spells: Browse Design Spells for highly creative patterns (e.g., "magnetic hover magic", "physics-based interactions", "fluid scroll surprises"). 3. Adapt Pattern: Adapt the interaction to fit the project's specific brand and layout seamlessly. Use it to enhance the core narrative of the app. 4. Implement flawlessly: Use CSS, Anime.js, or Framer Motion to build the specific micro-interaction with measured smoothness on target devices; frame-rate claims require profiling rather than a guarantee. Strict Rules Scoped enhancement: Use a micro-interaction only when it serves the requested product experience. Respect the user’s existing design, accessibility and performance constraints; ordinary clear behavior is valid, and this skill is optional. Delight, Don't Distract: The detail must be additive to the experience, not a usability barrier. It should feel expensive and highly crafted. Quality Execution: A broken or janky "spell" is worse than none. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/design-spells--2a5ed1