Pincushion for Openclaw

Pincushion bridges the gap between stakeholder UI feedback and autonomous AI agents by translating visual browser pins into precise, context-rich agent work packets.

jcooley8
v1.0.0
Jul 8, 2026
0
294
0

Install & Download

1. ClawHub CLI

The fastest way to install a skill directly from the registry.

npx clawhub@latest install pincushion

2. Manual Installation

Copy the skill folder to one of these locations

Global
~/.openclaw/skills/
Workspace
<project>/skills/

Priority: Workspace > Local > Bundled

3. Prompt Installation

Copy this prompt to OpenClaw to install it automatically.

Help me install pincushion using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).

Prefer to download?

Get the raw skill files in a ZIP archive.

What is Pincushion?

Pincushion provides the implementation-context layer for AI-native web development. When stakeholders drop a visual pin on any live web page, Pincushion captures the URL, precise element selector, viewport, screenshot, DOM snippet, comment thread, and acceptance criteria. This collection of rich context is bundled directly into an agent work packet, eliminating the ambiguity often associated with manual bug reporting.

By incorporating this system with Openclaw Skills, your AI agent can query and process these pins over the Model Context Protocol (MCP). The agent is empowered to read the feedback, claim the specific task, make targeted changes to your repository, and automatically mark the pin as resolved. This direct connection reduces manual triage work and speeds up UI iteration cycles.

Pincushion Use Cases

  • Automating visual and front-end bug resolution on staging or production websites using headless AI agents.
  • Accelerating stakeholder feedback loops during live web development without manually creating tickets in external trackers.
  • Fetching high-fidelity visual context such as DOM snippets, viewport data, and exact CSS selectors directly into autonomous agent workflows.
  • Resolving layout and presentation issues autonomously through the execution of Openclaw Skills.

How Pincushion Works

  1. A stakeholder drops a visual pin directly onto a live or staging webpage using a no-install widget.
  2. Pincushion compiles the pin's metadata, including the element selector, DOM snippet, viewport, and visual screenshots, into an structured agent work packet.
  3. The AI agent utilizes the Pincushion MCP server's get_actionable_pins tool to fetch pending, approved work packets.
  4. The agent executes claim_pin to lock the task, signaling to other processes that implementation has begun.
  5. Using the gathered selectors and visual details, the agent modifies the codebase to address the feedback.
  6. The agent calls fix_and_resolve with the Git branch, commit SHA, and optional PR URL, updating the stakeholder-facing pin status to resolved.

Pincushion Setup

1. Register the MCP Server

Run the following command to append the Pincushion server details to your local configuration. Be sure to replace /path/to/your/project with your absolute repository path:

openclaw mcp add pincushion \
  --command npx \
  --arg -y \
  --arg pincushion-mcp \
  --arg --project-dir \
  --arg /path/to/your/project \
  --arg --cloud-sync

Reload the agent context to register the newly available tools provided by these Openclaw Skills:

openclaw mcp reload && openclaw mcp list

2. Authenticate for Cloud Sync

To allow stakeholders to submit pins from deployed or staging environments to a headless agent, obtain a license key from pincushion.io. Write this key directly to your project root to avoid environment-filtering issues with MCP runtimes:

echo "YOUR_LICENSE_KEY" > /path/to/your/project/.feedback/.license-key

3. Embed the Widget

Include this script in your application's root layout or HTML template to let users drop pins without requiring any browser extensions:

<script src="https://pincushion.io/widget/pin.js" data-project="YOUR_PROJECT_ID" defer></script>

Pincushion Data Schema & Taxonomy

Pincushion coordinates feedback data either locally or via cloud synchronization. When using this toolset alongside Openclaw Skills, the workspace data is organized as follows:

File Structure

Path Description
.feedback/ Default workspace directory containing local pins and configurations.
.feedback/.license-key Stores the offline or cloud sync license key to authenticate your headless agent runner.
openclaw.json Updated during setup to define the pincushion MCP server configuration.

Work Packet Metadata Taxonomy

Each pin contains programmatic context structures designed for ingestion by coding agents:

  • CSS Selector: The precise element target identifier in the DOM.
  • DOM Snippet: Associated HTML segment representing the state of the target area.
  • Viewport details: Screen size and dimensions where the issue was observed.
  • Screenshots: High-fidelity visual assets displaying the rendered interface.
  • Comment Thread: Historical discussion context and stakeholder requirements.

Pincushion Advanced Features

  • Quickstart Sandbox: Execute start_quickstart_demo and resolve_quickstart_demo to run an offline, safe demo of the feedback loop without writing changes to the real codebase.
  • Slack and Teams Webhooks: Configure notifications via configure_collaboration_integration to broadcast agent activities, mentions, or follow-ups to specific workspace channels.
  • Interactive Collaboration: Allow agents to post technical or clarifying questions back to human stakeholders using add_agent_reply.
  • Bulk Implementation: Group related feedback objects on a page-by-page basis using implement_approved_pins for branch-driven batch changes.

SKILL.md


Loading

Related Openclaw Skills

METADATA

Github Stars: 0
forks: 0

Featured*