make-interfaces-feel-better
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.
Is make-interfaces-feel-better safe to install?
Safe to install: our audit of make-interfaces-feel-better's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides static design guidelines and instructions for code review. It does not execute commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Frontend developers and designers using AI agents to review UI code or implement design system improvements.
What can you do with it?
- Reviewing frontend code for UI polish
- Implementing animations and micro-interactions
- Refining typography and layout alignment
- Optimizing CSS transitions and performance
- Standardizing border radius and hit areas
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable design engineering principles with specific technical constraints and a defined output format for code reviews.
What does the skill file contain?
# Details that make interfaces feel better Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. ## Quick Reference | Category | When to Use | | --- | --- | | [Typography](typography.md) | Text wrapping, font smoothing, tabular numbers | | [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, image outlines, hit areas | | [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press | | [Perf...
Frequently asked questions
How should I present the review findings?
Always present changes in a markdown table with Before and After columns, grouped by principle.
What is the recommended scale value for button press feedback?
Use 0.96. Do not use values smaller than 0.95.
How do I handle icon animations if no motion library is installed?
Keep both icons in the DOM and cross-fade them using CSS transitions with cubic-bezier(0.2, 0, 0, 1).
What is the rule for concentric border radius?
Outer radius should equal inner radius plus padding.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
brainstorming
256.4KDevelopers and project managers who need to define requirements, architecture, and design for software projects before writing code
A structured brainstorming framework that guides users through project exploration, design proposal, and specification before implementation. It enforces a strict design-first workflow, requiring user approval for designs and documentation before transitioning to the writing-plans skill.
simple
221.4KDevelopers and project managers who need a fast, lightweight decision-making process for feature design or component creation
A structured brainstorming framework for architectural and creative tasks that guides users from discovery to decision-making through a defined process flow.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.