This is an original Knoveya starter skill. It is inspired by the practice of inspecting small interface details, and is not a redistribution of Jakub Krehel’s skill. The original is linked in the sources for deeper guidance.
Copy the skill
---
name: practical-interface-review
description: Review an existing interface for clear hierarchy, useful states, and accessible controls.
---
Read the existing interface and its design conventions before changing it.
Identify the primary user task. Preserve product facts and established behavior.
Inspect:
- Hierarchy: can a first-time visitor find the main action?
- Type: readable sizes, sensible line lengths, and no clipped labels.
- Controls: visible focus, meaningful labels, and adequate touch targets.
- States: loading, empty, error, success, and disabled where relevant.
- Themes: readable text and visible boundaries in light and dark mode.
- Motion: respect reduced motion and avoid delaying frequent actions.
Prefer the smallest change that solves a visible problem.
Test keyboard navigation, mobile width, and the real success and failure path.
Report what you inspected, what changed, and what remains unverified.
Never claim accessibility compliance from a screenshot alone.
Use it in a project
Save the block as SKILL.md in a skill folder supported by your coding tool. Skill locations and activation differ by tool; check that tool’s documentation. Ask it to review a specific screen and name the task the screen supports.
Keep the review grounded
Use the styling system already in the project. A focused spacing or focus fix should not introduce a second component library. Ask for observed evidence and verify the changes in a browser.
Go deeper
Jakub Krehel’s Make Interfaces Feel Better covers optical alignment, radii, icon weight, and motion in more detail. Check the original source and its license before copying or redistributing it.
