CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Quality

100%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

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.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
jakubkrehel/make-interfaces-feel-better
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.