Whimsical Design Skill

⚠️ Creative Pack — NOT auto-apply

This skill is part of the creative pack. Do NOT apply it by default on every visual task.

Use ONLY when at least one is true:

• user explicitly asks for personality, delight, whimsy, or brand expression
• task is marketing, landing page, portfolio, launch, or editorial
• the default/safe output is clearly the problem (everything looks the same)
• multiple creative directions are being explored on purpose

Do NOT use when:

• building utility UI, admin tools, settings pages, or internal tools
• the product already has a clear design language you should match
• the default aesthetic is already appropriate for the product category
• task is primarily about structure, states, or production hardening

If in doubt, skip this skill. Core skills (design-review, ux-baseline-check, ui-polish-pass) are always safe. This one requires judgment about whether "push past safe" is actually what the product needs.

When It Applies

Design-review catches quality problems. This skill pushes toward delight. Use alongside skills/design-review/SKILL.md when the triggers above are met.

The Bar

Would someone screenshot this and send it to a friend? Would it make them smile? If no, push further.

Core Principles

1. Whimsy Over Sterile

Default away from corporate SaaS. Toward warmth, personality, surprise. Think: the feeling of opening a Playdate box, or the first time you saw a Teenage Engineering product page.

• Pixel art, hand-drawn textures, playful illustrations
• Warm color palettes over cold neutral grays
• Personality in empty states, loading screens, error messages
• Small details that reward people who look closely

2. Juice

Everything should feel alive. Static interfaces are dead interfaces.

• Micro-interactions on hover, click, drag
• Subtle spring animations on state changes
• Parallax, bob, breathe — things that move even when idle
• Sound design where appropriate (click, whoosh, chirp)
• The difference between "functional" and "delightful" is 50ms of easing

Concrete recipes:

• Hover on cards: scale(1.02) + subtle shadow increase + 150ms ease-out
• Button press: scale(0.97) for 100ms, then back. feels tactile.
• Page entrance: stagger children with 50ms delay each, fade+translateY(8px), 300ms ease-out
• Status indicators: pulse animation on "live" items (opacity 1→0.4→1, 2s infinite)
• Charts: animate data points in on mount, left-to-right, 400ms ease-out with 30ms stagger
• Hover on table rows: background-color transition 150ms + slight translateX(2px) to feel "picked up"
• Toggle switches: spring physics (slight overshoot on slide, ~200ms)
• Empty states: gentle floating animation on the illustration (translateY ±4px, 3s ease-in-out infinite)

3. Bold Aesthetic Commitment

Before writing a single line of code, commit to a specific aesthetic direction. not "clean and modern" — that's a non-decision. pick an extreme and execute it with intention: