gowtham012

Pinpoint — Development skill for Claude Code

Development community

Click an element on your local dev site, write what should change, and your coding agent gets it — selector, computed styles, component chain, source hint and a cropped screenshot.

How to install Pinpoint

This entry records only its repository, not the path inside it, so there is no exact command to give. Open gowtham012/pinpoint and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Pinpoint does

Click an element on your local dev site, write what should change, and your coding agent gets it — selector, computed styles, component chain, source hint and a cropped screenshot. MCP bridge for Claude Code, Cursor and Codex.

Alternatives in Development

Screenshot — Capture desktop, app windows, or pixel regions across OS platforms 14.6k ★
Hand Drawn Styles — Claude Code skill：把内容套进内置手绘画风配方,产出可直接复制的生图提示词 930 ★
Beautiful Feishu Whiteboard — 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards 687 ★

README

Pinpoint

[![tests](https://github.com/gowtham012/pinpoint/actions/workflows/test.yml/badge.svg)](https://github.com/gowtham012/pinpoint/actions/workflows/test.yml) [![licence: MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](LICENSE)

Click an element on your local dev site, write what should change, and your coding agent gets it — with the selector, DOM path, computed styles, React/Vue component chain, source-file hint and a cropped screenshot. No screenshot files piling up in your Downloads folder, no describing "the third button on the left".

Browser (extension) ──POST──▶ pinpoint bridge (127.0.0.1:7331) ──MCP / hooks──▶ Claude Code, Cursor, Codex…
        pins ◀──live events───┘   ~/.pinpoint/annotations.json   └── /.pinpoint/pending.md (optional)

Quick start

You need **Node 18+** and a Chromium browser (Chrome, Arc, Brave or Edge). The `claude` CLI is only needed for steps 3 and 4.

Everywhere below, replace `~/code/my-app` with **your own project** — the repo whose UI you want to annotate.

# 1. get it
git clone https://github.com/gowtham012/pinpoint
cd pinpoint/bridge && npm install

# 2. start the bridge, and leave it running.
#    This blocks the terminal — open a second one for everything below.
node cli.js --project ~/code/my-app

**3. Load the extension.** Chrome → `chrome://extensions` → **Developer mode** on → **Load unpacked** → pick the **`extension/`** folder (one level up from `bridge/`). The toolbar icon's dot turns green once it can see the bridge.

Annotating a page you opened as a `file://` URL? Chrome keeps that off by default. On `chrome://extensions`, open Pinpoint's **Details** and turn on **"Allow access to file URLs"**, then reload the page. Without it Pinpoint cannot appear on `file://` pages at all.

# 4. teach Claude Code about Pinpoint (once), from pinpoint/bridge
claude mcp add pinpoint -s user -- node "$PWD/cli.js" mcp
node cli.js install-hooks ~/code/my-app     #