Stacksketch

Check your page against the Figma design, see why z-index fails, and send the Stacksketch workbench's API requests without CORS.

Stacksketch is the companion extension for the Stacksketch workbench (https://stacksketch.netlify.app), a free, open-source tool for the contract between frontend and backend. SEND API REQUESTS WITHOUT CORS The workbench's API client sends requests to your real API, checks every response against your API contract, and runs whole collections in order. A web page can only read answers from APIs that allow it (CORS), and most backends under development don't. With this extension installed, pick "Extension" in the API client and requests go out from the extension instead: • localhost and 127.0.0.1 work straight away • any other host asks for your permission once, the first time you send to it • your browser's cookies are never attached; only the headers you write are sent DESIGN QA ON THE LIVE PAGE • Lay a Figma frame export over your page with opacity, difference blending, @2x/@3x scale and arrow-key nudging, or lock it to an element • Measure: hover for an element's size and type; click one and hover another to see the gap between them • Check font size, line height, weight and letter spacing against the design's values • Pin numbered comments, each with a screenshot, and download a Markdown QA report WHY IS MY MODAL BEHIND THE HEADER? The stacking inspector scans the page and shows every stacking context as an exploded 3D stack with its z-index. Click one to see why it starts a context ("it has a transform"), and click two to see which paints on top and why. PRIVATE BY DESIGN No account, no analytics, no tracking, no remote code. It runs only on localhost, the Stacksketch workbench, and sites you turn it on for. Images, comments, reports and responses stay in your browser. Open source under the MIT licence.