@detaildotdesign/interface-details
@detaildotdesign/interface-details — AI coding skill
Interface Details Skill
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/skill
You can also browse the skill on skills.sh.
To update:
npx skills update
Usage
The 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.
What's inside
| 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 |
License
MIT
Loading...
Select a file to preview
Analyzing security...
Checking scan reports and verification data.
Bill of Materials
Everything this skill can do — files, network, commands, and more.