A skill that helps to bring crafted micro-interactions, extra considerations, and thoughtful details to interfaces, based on 120+ real-world examples curated on detail.design.
Most users will never notice any single design detail. But they will feel all of them together. This skill encodes that craft into actionable rules an AI coding assistant can apply while building UI.
npx skills add detaildotdesign/skillYou can also browse the skill on skills.sh.
To update:
npx skills updateThe agent should use it when you ask about "adding details" or "make the interface feel better".
Example prompts:
Use `interface-details` skill to review my project for missing details.
Go across all dialog components and bring some details.
Make the interface feel better by adding details.
| Chapter | Covers |
|---|---|
| Typography | Text rendering, overflow, truncation, document typography |
| Motion | Transitions, hover states, micro-animations, layout choreography |
| Design | Layout, surfaces, visual polish, browser chrome, media |
| Easter Egg | Hidden details, playful moments, personality, delight |
| Accessibility | Focus management, keyboard operability, screen readers, touch access |
| Copywriting | Microcopy, prompts, help text, errors, empty states, labels |
| Optimization | Load time, layout shift, main-thread work, network waste |
| Interactivity | Inputs, controls, scrolling, paste behavior, shortcuts, state flows |
MIT