Claude Code · Slash command · by Mehul Jatiya

Claude was taking screenshots
to read your layout.
That ends here.

Without /measure, Claude guesses padding and spacing from screenshots — imprecise, repetitive, expensive. /measure gives it the exact computed values for every element upfront. Fixes land on the first try.

~57k

tokens saved
per session

52%

reduction in
token usage

7 → 3

Chrome DevTools
calls per fix

Install — one file, done in 30 seconds:

$ curl -o ~/.claude/commands/measure.md \
https://mehuljatiya.github.io/measure/measure.md

One file in ~/.claude/commands/ — Claude Code picks it up automatically. Then type /measure in any project.

Single .md file Requires Claude Code Static + dev server Zero code changes

The problem it solves

The screenshot loop is costing you every session

Without /measure

→

"Fix the card padding" — Claude takes a screenshot to see the layout

→

Interprets it visually: "looks like ~12px?" — writes a guess

→

Still off — takes another screenshot, adjusts, repeats 2–3 more times

7 Chrome calls · ~110k tokens · 3–4 iterations

With /measure

→

Run /measure once — captures exact computed CSS for every element

→

"Fix the card padding" — Claude already knows it's exactly 12px, writes the correct fix

→

No screenshots needed for the rest of the session — snapshot stays in context

3 Chrome calls · ~53k tokens · 1 iteration

The same savings apply when fixing font sizes, border radii, spacing between elements, or any visual property. Claude stops guessing from images and starts working from numbers — across every fix in the session.

What it captures

Exact values, not visual estimates

⌖

50+ CSS properties per element

Padding, margin, font size, line height, colors, border radius, shadows, flex/grid layout, position — everything computed, not declared. What the browser actually rendered.

◎

Auto-discovers every element

No annotations. Finds semantic HTML, ARIA roles, design-system class patterns, interactive elements, and the 30 largest visual regions — automatically.

⚡

Smart routing

Detects static site vs dev server. Navigates via file:// directly for static projects — no port-probing, no capturing the wrong project's page.

◈

Reused across the session

Writes layout-snapshot.json to the project root. Claude references it for every subsequent fix — one capture, zero re-measuring.

layout-snapshot.json

"_meta": {
  "url":      "http://localhost:5173/transactions",
  "viewport": { "w": 1440, "h": 900 },
  "total":    62  // elements captured
},
"elements": [
  {
    "tag":          "div",  // .transaction-card
    "_rect":        { "w": 1352, "h": 72, "x": 44, "y": 180 },
    "paddingTop":   "12px",   // exact — not a screenshot guess
    "paddingLeft":  "16px",
    "fontSize":     "14px",
    "gap":          "12px",
    "borderRadius": "8px",
    "borderBottom": "1px solid oklch(22% 0.010 60)"
    // + 44 more properties
  }
]

How it works

Smart routing, zero wasted calls

Detect static vs dev server

Checks for package.json. Static sites open directly via file:// — no port probing, no risk of landing on another project's server. Dev server projects read the port from scripts.dev or vite.config.ts.

Handle the server without waste

For dev servers: if the right project is already running, it reuses it. If a different project is on the port, it kills and restarts correctly. It never captures the wrong project's page — the mistake that costs ~57k tokens to recover from.

Navigate, wait, capture

Opens the URL in Chrome via DevTools MCP, waits for document.readyState === 'complete', adds 1.5s for async renders, then injects the capture script. 3 Chrome calls total — regardless of project type.

Write once, reference all session

Saves exact computed values to layout-snapshot.json. Claude reads it at the start of every subsequent task in the session — no re-measuring, no new screenshots for layout questions.

Usage

Works on any page, any project type

/measure

Captures the root page — / for dev servers, index.html for static sites.

/measure transactions

Navigates to /transactions on the dev server before capturing.

/measure about.html

Opens a specific HTML file for static sites. The .html extension triggers static mode.

/measure complaints/123

Works with nested routes and dynamic path segments.

Get started

One file. Installed in 30 seconds.

Install Claude Code

You'll need @anthropic-ai/claude-code installed globally and an Anthropic API key from console.anthropic.com.

$ npm install -g @anthropic-ai/claude-code

Drop in the command file

Copies measure.md into ~/.claude/commands/ — the folder Claude Code scans for slash commands on startup. Nothing else is installed.