Skill

UI Element Best Practices

Check individual UI elements (buttons, forms, nav, modals, cards, tables, states, notifications, tooltips) against Laws of UX with with/without examples.

// ui-design;

Behaviour

What it does

Grounds element-level reviews in named UX laws (Fitts's, Hick's, Jakob's, Miller's, and more) rather than taste
Covers nine component types: buttons, forms, navigation, modals, cards, tables, states, notifications, tooltips
Shows side-by-side without/with comparisons for each element area
Cites the mechanism behind each rule, not just the rule itself
Reports verdict (Pass / Needs revision / Blocked) with severity-rated issues per element

When to use

Good fits

Reviewing a single component instead of a full screen

During component-development, before a component ships

When a specific element (a button, a modal, a table) feels off but you can't say why

As a companion to ui-ux-best-practices for element-level detail

Development harness

Element UX review

Part of the design-to-ship pipeline: brainstorming → technical-documentation → conformance-check → reconciling-changes → planning → project-setup → executing-plans → shipping. Install the full set for structured feature work.

Test-Driven Development End-to-End Testing Component Development Component Testing

View full harness

Install

Get this skill

Uses Agent Kit via npx; no global install required.

Quick install

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill ui-element-best-practices

Global (Cursor)

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill ui-element-best-practices --global --agent cursor

Global (Claude)

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill ui-element-best-practices --global --agent claude

Project install

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill ui-element-best-practices --project

Interactive install

npx @levi-putna/agent-kit@latest add levi-putna/skills

Uninstall

npx @levi-putna/agent-kit@latest remove ui-element-best-practices

Example

Example prompt

UI Element Best Practices

Check this modal against Laws of UX: focus trapping, dismissal paths, and destructive-action clarity.

Example

Before and after

Before

A confirmation modal with no visible way to cancel, a 320ms-delayed spinner on every click, and a 'Delete' button styled identically to 'Cancel'.

After

A modal with a clear dismiss path (Esc, backdrop click, and a labelled Cancel button), focus trapped and returned on close, and a destructive Delete button visually distinct from Cancel with the consequence stated inline.

Foundation

Grounded in Laws of UX

This skill cites named UX laws rather than taste. See the full set with definitions, mechanisms, and without/with examples.

Browse the Laws of UX

Flow

How the skill works

Identify the element type and which laws apply
Compare current behaviour against the law's mechanism
Flag violations with severity and a concrete fix
Show the corrected version applying the law
Report using the Pass / Needs revision / Blocked template