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 that provides dense, actionable design engineering guidance without wasting tokens. It combines specific values, conditional logic, and concrete formulas into a scannable format with tables, checklists, and clear references to detailed files. The content perfectly balances being a standalone reference and an entry point to deeper materials.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every section is lean and direct. No unnecessary explanations of what CSS properties are or how browsers work. Specific values are given (0.96, 40×40px, 100ms) without padding. The content assumes Claude knows CSS/JS and only provides the design-specific knowledge Claude wouldn't have. | 3 / 3 |
Actionability | Highly actionable with specific CSS properties, exact values (scale 0.96, cubic-bezier(0.2, 0, 0, 1), blur 4px to 0px), concrete formulas (outerRadius = innerRadius + padding), and conditional logic (check package.json for motion library). The guidance is copy-paste ready and leaves no ambiguity about implementation. | 3 / 3 |
Workflow Clarity | For a design principles skill, the workflow is well-structured: quick reference table for navigation, numbered principles for application order, a common mistakes table for debugging, and a review checklist for verification. The checklist serves as an explicit validation step. This is not a destructive multi-step operation, so the single-task scoring note applies. | 3 / 3 |
Progressive Disclosure | Excellent progressive disclosure with a quick reference table linking to four detailed files (typography.md, surfaces.md, animations.md, performance.md), repeated as reference links at the bottom. The SKILL.md provides a complete overview with enough detail to act on, while clearly signaling where to find deeper content. All references are one level deep. | 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.
10f76f9
Table of Contents
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.