make-interfaces-feel-better
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
100
100%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that clearly defines its niche in UI polish and design engineering. It provides comprehensive trigger terms covering both technical vocabulary and natural user language, explicitly states when to use it, and lists specific concrete capabilities. The description is well-structured with distinct 'Use when' and 'Triggers on' sections that make skill selection straightforward.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and concepts: animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, optical alignment, font smoothing, tabular numbers, image outlines, box shadows. These are highly specific design engineering capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (design engineering principles for polished interfaces) and 'when' with an explicit 'Use when...' clause listing specific scenarios, plus a 'Triggers on' section with additional keyword guidance. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say, including both technical terms ('border radius', 'font smoothing', 'tabular numbers', 'box shadows') and natural language phrases ('make it feel better', 'feels off', 'UI polish'). This covers a wide range of how users might express their needs. | 3 / 3 |
Distinctiveness Conflict Risk | Occupies a clear niche focused specifically on UI polish and visual detail work, distinct from general frontend development or design system skills. The trigger terms like 'feels off', 'optical alignment', and 'stagger animations' are highly specific to this domain and unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is an exceptionally well-crafted skill file. It provides dense, specific, actionable guidance with exact values and thresholds throughout, organized with a clear quick-reference table, numbered principles, a common mistakes table, a review output format with examples, and a checklist. The progressive disclosure is textbook — overview in the main file with clear pointers to four detail files. The only minor note is that principle #7 (icon animations) is slightly longer than others, but it justifies its length with conditional branching logic.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every section is dense with actionable specifics — exact values (0.96, 40×40px, 100ms delay), exact CSS properties, and exact reasoning. No unnecessary explanations of what CSS transitions are or how box-shadow works. The only mild verbosity is the icon animation section (#7), but even that earns its length with conditional logic (motion library vs. no motion library). | 3 / 3 |
Actionability | Highly actionable with specific CSS values, exact Tailwind classes, concrete before/after examples, and precise thresholds (never below 0.95, always 0.96, rgba values for outlines). The review output format section provides copy-paste-ready table templates. The checklist is immediately usable for code review. | 3 / 3 |
Workflow Clarity | The skill is primarily a reference/review skill rather than a destructive multi-step process, so the workflow requirements are different. The review workflow is clearly defined: apply principles → present changes in before/after tables grouped by principle → use the checklist to verify completeness. The review output format section provides an explicit, unambiguous sequence for how to present findings. | 3 / 3 |
Progressive Disclosure | Excellent structure: quick reference table at top linking to four detailed files, core principles as a scannable numbered list in the main file, common mistakes as a quick-reference table, and clear one-level-deep references to typography.md, surfaces.md, animations.md, and performance.md. Content is appropriately split between overview and detail files. | 3 / 3 |
Total | 12 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- jakubkrehel/make-interfaces-feel-better
- Commit
3845620
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.