Component Audit bookmarklet
Drag the link below to your bookmarks bar. Open any page you want to audit — including pages behind sign-in (admin consoles, internal apps, your own authenticated dashboards) — then click the bookmarklet. A detection overlay appears in the corner with the design system assessment, evidence, and a recommendation framed by your likely intent.
Everything runs in your browser. No data leaves your device. No server is called. This is the privacy-safe way to audit authenticated surfaces — same detection logic as the server-side tool, just executed locally on the page you're already viewing.
Step 1 — Install
Show your bookmarks bar (Cmd+Shift+B on most browsers). Then drag this link onto it:
Bookmarklet size: 15.8 KB. If your browser blocks the drag, right-click the link → Bookmark this link.
Step 2 — Use
- Sign in to the app or page you want to audit.
- Navigate to the screen with the interaction or surface you're studying.
- Click the Audit this page bookmark in your bar.
- A detection overlay appears top-right with: design system label + confidence, evidence the detector used, an intent-aware recommendation, and an interactive-element inventory.
- Close it with the × button or Esc.
What it detects
- Private design systems via asset URL patterns — a curated list of known private/proprietary systems is shipped with the script.
- Public web-component libraries via tag prefixes — Material Web (
md-,mwc-,mat-), Fluent UI Web (fluent-,fast-), Carbon Web (cds-). - In-house systems via scoped class signatures — styled-components, CSS Modules, Emotion, Linaria, vanilla-extract.
- Design-token surfaces via CSS custom properties on
:root. - Interactive inventory — buttons, inputs, selects, links, dialogs, tables, forms, custom elements.
Privacy
The bookmarklet is a self-contained ~15.8 KB script. When you click it, it executes inside the page you're viewing, reads the DOM and stylesheet links, runs the detection rubric, and renders a results overlay in the same page. Nothing is transmitted off your machine. There is no fetch, no analytics, no telemetry, no error reporting.
Source code is published verbatim at /bookmarklet/component-audit.source.js so you can read exactly what runs in your browser.
When to use the bookmarklet vs the web tool
- Use the Component Audit web tool for any public URL. It gives you the full report: screenshots, annotations, per-finding recommendations with priority tags, Markdown / PDF export.
- Use this bookmarklet for pages behind sign-in, region locks, or anything a server-side scan can't reach. The output is lighter — detection assessment and an intent-aware recommendation — but it runs anywhere your browser does.