interface-details

Skills that craft your projects with details. Micro interactions, extra considerations, wording, and more.

Installation
CLI
npx skills add https://github.com/detaildotdesign/skill --skill interface-details

Install this skill with the CLI and start using the SKILL.md workflow in your workspace.

Last updated 4/23/2026

Interface Details Skill

A skill that helps to bring crafted micro-interactions, extra considerations, and thoughtful details to interfaces — based on 100+ 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.

Usage

The agent should use it when you ask about "adding details" or "make the interface feels better".

Example prompts:

Load `interface-details` skill to review my form component for missing details.
Go across all dialog components and bring some details.
Make the interface feels better by adding details.

License

MIT