Visual feedback for Claude Code & coding agents

The loop

1. Run the sidecar. npx sluglist dev binds 127.0.0.1 and writes reports into a local .sluglist/ folder — browser JS can't touch disk, so this tiny process does.
2. Click feedback. Report a bug with the widget while you use the app. The full artifact set — screenshot, comment, CSS selector, page errors and a trail of action frames — lands in the folder.
3. Let the agent fix it. Install the bundled skills once with npx sluglist init, then tell Claude Code to "read feedback and fix it." The sluglist-fix skill reads each issue, localizes by selector and frames, fixes the code, and writes a .done report.

import { createFeedbackWidget, mountFeedbackWidget, LocalConnector } from "sluglist";

mountFeedbackWidget(
  createFeedbackWidget({
    connectors: [new LocalConnector()],
  })
);

Gate it behind an env flag so it never initializes in production — enabled: process.env.NODE_ENV !== "production".

npx sluglist dev        # sidecar that writes to ./.sluglist

Why agents resolve these reports well

Every issue is a markdown file written for a file-reading agent, not a human dashboard:

• A smart CSS selector (data-testid → id → aria → landmark path — never Tailwind utility or hashed classes), plus dom_path and element_text, localize the element.
• A React component hint — sluglist reads the nearest named component from the element's fiber and records component: AnimalForm. No React dependency required; null when unavailable.
• ## Errors carries recent console errors, uncaught exceptions and failed requests (PATCH /api/animals/128 → 500) with relative timestamps — often the root cause is already in the report.
• ## Actions + record-mode frames give steps-to-reproduce as numbered screenshots, cross-referenced line by line.

The agent doesn't guess what the user meant; it reads what the page knew.

The four bundled skills

npx sluglist init installs all four, plus .sluglist/PROJECT.md for the project specifics the skills read first. A skill you have edited is never overwritten — which is exactly why project knowledge belongs in PROJECT.md rather than in an edited prompt.

The other direction: agent-generated checklists

sluglist-checklist turns a branch diff into a client-facing acceptance checklist. The client walks it on staging, checks items off or flags problems, and every verdict lands in session.yaml — which the agent can read back to see what failed. See Checklist mode.

Let an agent walk it instead and the loop closes without you: the autonomous QA loop.

Not just Claude Code

The artifacts are a stable, documented format — plain markdown, YAML and PNG in a folder. Any agent or script that can read files can consume them; the Claude Code skills are a convenience, not a dependency.