Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →athevon/desktop-principles
Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.
Passed 21 of 22 test cases with the skill, and 18 of 22 without it.
and 3 more in the full report
3 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am refactoring a web-based desktop application to improve keyboard navigation. Please provide a JavaScript snippet that detects the appropriate system modifier key across Mac and Windows to handle standard app shortcuts, as well as CSS styles for focus rings that show up for keyboard users without appearing on mouse clicks.
| Checked | Without skill | With skill |
|---|---|---|
| Uses nullish coalescing operators (??) when checking navigator platform properties in JavaScript. | Missed | Passed |
| Applies visual outline focus styles within a :focus-visible CSS selector. | Passed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in
_jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.
Desktop UX context. Loaded when desktop is detected (macOS, Windows, Linux desktop, web desktop). Concise rules here. Deep-dive in
references/.
Hover is the primary affordance signal on desktop, the inverse of mobile. A pointer hovering over a target without immediate visual feedback feels broken: users rely on :hover to confirm an element is interactive before committing to a click. Every clickable surface must have a distinct hover style, ideally with a 100-200ms transition so the change is perceptible without feeling sluggish.
CSS - hover styles for interactive elements:
.button {
background: var(--surface);
transition: background 120ms ease-out, transform 120ms ease-out;
}
.button:hover {
background: var(--surface-hover);
transform: translateY(-1px);
}
.button:active {
transform: translateY(0);
}
SwiftUI - .onHover is the portable hover signal; .hoverEffect is iOS/iPadOS-only and must be #if-gated:
| Modifier | Availability | Notes |
|---|---|---|
.onHover { Bool } | iOS 13.4+, iPadOS 13.4+, Mac Catalyst 13.4+, macOS 10.15+, visionOS 1.0+ | the one that works on macOS |
.onContinuousHover { HoverPhase } | iOS 17.0+, macOS 14.0+, tvOS 17.0+, visionOS 1.0+ | pointer position, not just in/out |
.hoverEffect(_:) | iOS 13.4+, iPadOS 13.4+, Mac Catalyst 13.4+, tvOS 16.0+, visionOS 1.0+ - macOS unavailable | compile error in a macOS target |
.pointerStyle(_:) | macOS 15.0+, visionOS 2.0+ | change the macOS cursor over a view |
test cases passed, vs 18 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.