WordPress plugin development

We are a premium DTC press-on nail brand launching a mobile-first WooCommerce website. We need a Senior Frontend Developer to build our core feature: the "Smart Sizer." This is a custom, interactive mobile UI tool that allows users to measure the physical width of their nail beds using their phone screen. CRITICAL RULE: NO AI, NO CAMERA, NO BACKEND. We do NOT want any computer vision, AR, or camera activation. This must be a 100% lightweight, pure frontend JavaScript/CSS solution using on-screen interactive sliders and physical calibration. How the Tool Works (User Flow): The Trigger: A "Find My Exact Size" button on the WooCommerce mobile Product Detail Page (PDP) opens a full-screen modal overlay. Phase 1: Physical Calibration (Establishing PPI Scale): The user selects a standard physical reference item (Credit Card or Coin). A digital outline appears on the screen. The user places their actual physical card directly on their phone screen. They use an on-screen slider to adjust the digital outline until it perfectly matches their physical card. Your code calculates the exact pixel-to-millimeter ratio for their specific device based on this adjustment. Phase 2: Width Measurement: The user places their actual thumb directly flat on the phone screen. They drag two vertical guidelines (left and right) to frame the widest part of their nail bed. Your code calculates the pixel distance between the lines, applies the calibration ratio, and outputs the exact width in millimeters. Phase 3: WooCommerce Cart Integration: The tool matches the measured mm to our brand's size variants (e.g., 15mm = Medium). It automatically selects the corresponding product variant (S, M, L, or Custom) on the WooCommerce PDP and prompts the user to "Add to Cart." Technical Challenges You Must Solve (The "Touch Event" Conflict): Since this is a mobile-focused tool, users will be placing fingers on the screen while sliding the UI controls with another hand. You MUST implement flawless touch-event handling to prevent native browser scrolling, bouncing, or zooming while the modal is active (e.g., locking the body scroll, utilizing touch-action: none, and properly handling touchstart/touchmove with e.preventDefault()). The sliders must feel incredibly smooth and native. Deliverables: A clean, well-commented, lightweight custom JavaScript/CSS package (or lightweight WP plugin) that integrates seamlessly with a WooCommerce PDP. UI design will be provided via Figma (high-fidelity wireframes). You just need to translate the UI and build the logic. Must be fully responsive, but heavily optimized for mobile (Safari/Chrome on iOS and Android). Requirements for the Developer: Deep expertise in Vanilla JS, DOM manipulation, and handling mobile touch events. Experience interacting with WooCommerce frontend variants (selecting variants via JS). Ability to write clean, modular code without relying on heavy unnecessary libraries. Excellent English communication and respect for strict deadlines. To Apply (IMPORTANT): To ensure you have read this description and are not an auto-bidder, please start your proposal with the word "CALIBRATION". In your proposal, please briefly explain: What JavaScript approach/libraries you will use to build this. Exactly how you plan to solve the mobile "Touch Event Conflict" (preventing the page from scrolling while the user interacts with the sliders). If you do not answer these two questions, your application will be ignored.