More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Layout Debug: point at UI, agent fixes the code

    1

    Alt+click any element in your running web page or Android Compose app, drag it or type the change, and your agent edits the right line of code.

    Free

    Security scanned

    Layout Debug: point at UI, agent fixes the code

    Example session with this skill installed

    Open the layout-debug window on http://localhost:3000 and listen for my edits.

    • Read your context and instructions
    • Compiled the layout debug
    • Generated the UI component

    Summary

    The layout-debug window is open and I'm listening. Your first request moved the plan price under the title; the frame refreshed with the change.

    What I received from the window

    Your comment: "Put the price under the title, same gap as the subtitle", sent on the element you Alt+clicked and dragged:

    FieldValue
    elementspan "$49 / year"
    sourcesrc/components/PlanCard.tsx:41
    data-testidplan-price
    classesml-auto text-sm text-gray-500
    box72×20 @ 912,231 (css-px)
    parent box416×40 @ 588,221
    live editoffset -324, 22

    What I changed

    The price sat in the same flex row as the title and was pushed right by ml-auto. Your drag moved it left and down by one line, so this is a column, not an offset:

    - <div className="flex items-center">
+ <div className="flex flex-col gap-1">
    <h3 className="text-lg font-semibold">{plan.name}</h3>
-   <span className="ml-auto text-sm text-gray-500" data-testid="plan-price">
+   <span className="text-sm text-gray-500" data-testid="plan-price">

    gap-1 matches the gap between the title and the subtitle in PlanCard.tsx:36.

    Reply sent to the window

    reply_in_window(status: "done"): "Moved the price under the title: the header row is now flex flex-col gap-1, removed ml-auto (src/components/PlanCard.tsx:39-41)."

    Next steps

    • Check the refreshed frame; your other live edits were re-applied on top.
    • Select the next element and send another change; I'm back on wait_for_message.
    • Say "stop listening" when you're done.

    PlanCard.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Stop describing UI to your agent in words. This skill teaches your agent to work with layout-debug-mcp, a free open-source MCP server that opens a local window over your running UI. You Alt+click the element you mean, drag or resize it on the real screen if you like, and type what to change. Your agent gets the element's anchors, box, parents and the measured delta, edits the code, and answers in the same window while the frame refreshes with the result.

    What it does

    • No more "which element?" The agent receives file:line (React/JSX with the bundled dev plugin, always on Android), test id, id, class string and text, so it edits the right element on the first try.
    • Measurements, not adjectives. Drag a button 16 px down and the real page moves without a rebuild. The agent gets offset 0, 16 in css-px (web) or dp (Android) and decides whether that becomes a margin, a gap, a reordered child or a Spacer.
    • A chat per element. The agent listens to the window, replies in the element's thread and waits for your next message, so you iterate until it looks right.
    • Safe by default. Page text reaches the agent marked as untrusted data, and the skill tells the agent never to follow instructions found there.

    How it works

    1. The agent calls open_window: the local server starts and the window opens in your browser.
    2. The agent calls wait_for_message and listens.
    3. You select an element, optionally drag or resize it, and type the change.
    4. The agent finds the element by its strongest anchor, edits the code and calls reply_in_window with what changed.
    5. The window waits for hot reload, refreshes the frame, and the agent goes back to listening.

    Targets

    • Web: any real DOM page from your dev server (React, Vue, plain HTML). file:line needs the bundled Vite or Babel plugin; without it the agent uses test id, id and classes.
    • Android: Jetpack Compose on a device or emulator over adb, with a debug-only on-device agent library. You get the full composition tree with file:line from the Compose compiler and live overrides on the device.

    Requirements

    • Node.js 22.12+ (or 20.19+)
    • The layout-debug-mcp MCP server: npx -y layout-debug-mcp in any MCP client
    • Android only: adb and a debug build with the on-device agent

    Known limitations

    • Live edits in the window are a preview; the code changes only when the agent edits it.
    • The web page is shown in an iframe; pages that forbid framing need the built-in framing proxy.
    • Compose Multiplatform on wasmJs (canvas) is not supported.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean today

    • Free to download with an account

    Requires

    Layout Debug MCP
    Node.js
    adb (Android only)
    ENOENT

    Listedtoday

    What's inside

    Frequently Asked Questions