detail-craft

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.