design-spells

Curated micro-interactions and design details that add "magic" and personality to websites and apps.

Try it — you'd type

“Help me with design-spells.”

And you'd get back

Curated micro-interactions and design details that add "magic" and personality to websites and apps.

Formatted for Claude, no fluff, no preamble.

Works the same way every time you ask.

Adding it takes about 30 seconds

Click Get this skill. Grab the .md file, one click, no account needed.

Add it to Claude. Drop it into ~/.claude/skills/. Claude picks it up the next time you open a session.

Ask normally. Type your question. The skill triggers on the right keywords — you don't have to remember anything.

Unlock all skills — $25

You might also like

OpenAI Integration

Integrate OpenAI API with best practices

Claude API Setup

Set up Claude/Anthropic API integration

Embedding Search

Implement vector embedding search

RAG Pipeline

Build Retrieval-Augmented Generation pipeline

Prompt Template

Create reusable prompt templates with variables

AI Streaming

Implement streaming AI responses

SKILL FILEWhat Claude actually reads

[Design Spells](https://www.designspells.com/) 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 silky-smooth performance (60fps+).

## Strict Rules

- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in the common style and ways. Look for every opportunity to inject "magic" into standard components.
- **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. Ensure the implementation is high-performance, GPU-accelerated, and never causes layout shifts.