@detaildotdesign/interface-details

@detaildotdesign/interface-details — AI coding skill

View in AI SkillSafe app
0 downloads
0 stars
0 demos
SKILL.md

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

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@detaildotdesign/interface-details/verified)](https://skillsafe.ai/skill/@detaildotdesign/interface-details/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@detaildotdesign/interface-details/installs)](https://skillsafe.ai/skill/@detaildotdesign/interface-details/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@detaildotdesign/interface-details/scan)](https://skillsafe.ai/skill/@detaildotdesign/interface-details/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@detaildotdesign/interface-details/eval)](https://skillsafe.ai/skill/@detaildotdesign/interface-details/)