Interface Details

When to use this skill

• Building new components (forms, buttons, modals, navigation)
• Reviewing existing UI for polish opportunities
• Implementing animations and transitions
• Handling edge cases in user input and browser behavior
• Adding personality and delight to an interface

How to use this skill

details/

• details/form.md

  — Form inputs, keyboards, labels, date pickers, paste behavior

• details/toast.md

  — Feedback, notifications, status indicators, loading states

• details/motion.md

  — Transitions, hover states, micro-animations, layout shifts

• details/button.md

  — Buttons, click states, cursors, hit areas, shortcuts

• details/typography.md

  — Text rendering, overflow, truncation, formatting

• details/scroll.md

  — Scroll behavior, anchoring, navigation, overscroll

• details/accessibility.md

  — Focus rings, reduced motion, screen reader support

• details/layout.md

  — Border radius, layout shifts, optical alignment, spacing

• details/browser.md

  — Favicons, theme colors, URLs, meta tags, PWA

• details/content-intelligence.md

  — Smart defaults, context-aware behavior, auto-detection

• details/easter-egg.md

  — Playful details, hidden features, personality, delight

Core philosophy

1. Craft over decoration. Every detail should serve the user, not the designer's ego.
2. Ambient over obvious. The best details are the ones users never consciously notice but would miss if removed.
3. Physics over magic. Animations should respect spatial continuity and physical metaphor.
4. Intent over input. Anticipate what users mean, not just what they type or click.
5. Consistency over novelty. A detail applied inconsistently is worse than no detail at all.

What qualifies as a detail

• A reusable technique applicable beyond a single product
• Too subtle to notice individually, but contributes to the overall feeling
• An easter egg or moment of delight that AI would not naturally add

• A required feature or core functionality
• Onboarding, hero sections, or card design (already well-documented elsewhere)
• Pure visual decoration with no functional purpose