skills.rest
olzn
olznCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

detail-craft

Diagnose platform-specific web interface issues across iOS, Android, and desktop.

16|1|Updated Feb 6, 2026
Search Tags:#performance#accessibility#ios#forms#web-ui#touch#visual-polish
One-click install
npx skills add https://github.com/olzn/ui-craft --skill detail-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: detail-craft
Source: https://github.com/olzn/ui-craft/tree/main/detail-craft
Command: npx skills add https://github.com/olzn/ui-craft --skill detail-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Detail-craft captures the platform-specific implementation details, touch and input quirks, accessibility micro-decisions, and visual refinements that cause user friction or reveal low-quality interfaces. It helps teams prevent common mobile and desktop issues (iOS input zoom, sticky hover on touch, dead click zones, misplaced focus) and ensures interactive UI behaves predictably across browsers and devices. The guidance turns subjective visual preferences into repeatable, testable implementation patterns so products feel polished and professional.

Core Features & Use Cases

  • Forms & Inputs: Correct input types, label focus binding, minimum font-size for iOS, required attributes, and decoration placement to avoid dead zones.
  • Interaction & Touch: Scope hover to pointer devices, replace iOS tap highlights with accessible active states, disable native gestures in custom gesture areas, and use pointer capture for reliable drags.
  • Menus, Tooltips & Accessibility: Open menus on mousedown, provide prediction cones for nested menus, enforce tooltip semantics, aria-labels for icon-only controls, and roving keyboard navigation for lists.
  • Performance & Scroll: Pause off-screen loops and videos, limit heavy blur usage, advise GPU compositing sparingly, and recommend bypassing React state for high-frequency DOM writes.
  • Visual Polish & Implementation Patterns: Concentric border radii, optical alignment for icon buttons, multi-layered box shadows, optimistic updates, theme-switching without transition flash, and checklists for reviews.
  • Use Case Example: During a release QA pass, run the checklist to fix iOS input zoom, replace sticky hover behavior on touch devices, ensure disabled controls surface inline explanations, and adjust nested radii for optical balance.

Quick Start

Audit my interactive form for platform-specific issues and provide prioritized, code-ready fixes for iOS input zoom, sticky hover on touch, focus return behavior, and any accessibility micro-details.

Frequently Asked Questions about detail-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix iOS input zoom on web forms?▼

To fix iOS input zoom, set input text size to a minimum of 16px to prevent automatic viewport scaling on focus. This platform-specific interface quirk is resolved using actionable CSS patterns that ensure predictable form interactions.

What is the best way to handle sticky hover states on touch devices?▼

The best way to handle sticky hover on touch devices is to scope hover interactions to pointer-capable hardware using CSS media queries. This prevents dead click zones and replaces iOS tap highlights with accessible active states.

How do I implement roving keyboard navigation for web UI lists?▼

Roving keyboard navigation for web UI lists is implemented using specific JavaScript patterns and accessibility attributes to manage focus movement. This ensures interactive lists, menus, and icon-only controls receive proper focus return behavior.

Why does heavy blur usage hurt web interface performance?▼

Heavy blur usage hurts web interface performance because it triggers expensive GPU compositing operations during scrolling. Limiting heavy blur effects and pausing off-screen loops ensures smooth scroll-linked behaviour and production quality.

Can I bypass React state for high-frequency DOM writes during drags?▼

Yes, you can bypass React state for high-frequency DOM writes by using direct DOM manipulation and pointer capture. This ensures reliable drag interactions and avoids performance pitfalls associated with frequent component re-renders.

Does this approach cover accessibility micro-details for production readiness?▼

Yes, this approach covers accessibility micro-details for production readiness by providing aria-labels for icon-only controls and enforcing tooltip semantics. It turns subjective visual preferences into repeatable, testable implementation patterns for release QA.

Related Skills

Explore More Software Engineering Skills→
GeneralJerelGeneralJerel
6

audit-accessibility

Audit web UI components for WCAG 2.1 AA conformance using POUR principles.

Community
Advanced
mohamed-g-shoaibmohamed-g-shoaib

make-interfaces-feel-better

Apply UI polish principles for typography, motion, and design tokens.

Community
Advanced
whimzyLivewhimzyLive
3

gsap-core

Implement GSAP core animations for DOM and SVG elements in React and Vue.

Community
Advanced
marcius-llmusmarcius-llmus
1

web-design-guidelines

Review UI and frontend files for accessibility, performance, and UX violations.

Community
Intermediate