# Add Visual Feedback to Next.js

Collecting precise visual feedback in a Next.js interface can require manual screenshots and descriptions. This skill installs Agentation and configures development-only annotations.

## Install

```bash
npx skillstore add benjitaylor/agentation
```

## Metadata

- Status: approved
- Slug: benjitaylor-agentation
- Skillstore revision: r2
- Version status: missing
- Tree hash: 4919a2640d0084295ef79c30b60ec7e03aec455b46079d3c2d23e7715ae790e6
- Author: benjitaylor
- GitHub username: benjitaylor
- License: MIT
- Repository: https://github.com/benjitaylor/agentation/tree/main/skills/agentation/
- Ref: 8c3e20bba512c392d9b02ee748b18e0b09d4982c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, env\_access
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/benjitaylor-agentation
- Manifest: https://skillstore.pages.dev/api/skills/benjitaylor-agentation/manifest

## Capabilities

- Checks whether the Agentation package is already installed.
- Detects existing Agentation imports or components before making changes.
- Identifies Next.js App Router and Pages Router project structures.
- Adds the Agentation component behind a development-only NODE\_ENV condition.
- Recommends optional MCP setup for real-time annotation synchronization.

## Use Cases

- Add Design Review Annotations: Install a visual annotation toolbar for reviewing interface details during local Next.js development.
- Capture Precise Product Feedback: Enable reviewers to attach feedback directly to rendered interface elements during acceptance testing.
- Synchronize Feedback With Agents: Configure optional MCP integration so supported coding agents can receive and resolve pending annotations.

## Prompt Templates

### Check Agentation Setup

```
Check whether Agentation is installed and configured in this Next.js project. Report what you find without changing files.
```

### Install the Toolbar

```
Add Agentation to this Next.js project. Ask before installing packages, detect the router, and keep the toolbar limited to development.
```

### Repair an Existing Integration

```
Review the existing Agentation integration, remove duplicate setup, and ensure the component appears only in development. Summarize every change.
```

### Configure the Full Feedback Workflow

```
Set up Agentation and propose MCP synchronization. Verify package provenance, request approval before commands, and run available setup checks after configuration.
```

## Limitations

- Supports Next.js App Router and Pages Router integration only.
- Requires React 18 in the target project.
- Package installation and project edits require filesystem and command access.
- Real-time agent synchronization needs separate MCP installation, configuration, and restart.

## Best Practices

- Review package provenance and approve installation commands before execution.
- Keep the Agentation component behind the development-only environment check.
- Check for existing imports and components before editing the application root.

## Anti Patterns

- Do not render the annotation toolbar unconditionally in production.
- Do not install packages or configure MCP servers without explicit approval.
- Do not add duplicate Agentation imports or components when setup already exists.

## Security Audit

- Audited at: 2026-07-23T11:12:59.372\+00:00
- Summary: Three findings confirm instructions to run fixed package or MCP commands, which introduce ordinary dependency and tool execution risk. The other detections are markdown syntax, file names, a documentation link, or a development-only NODE\_ENV check. No prompt injection, credential access, or malicious intent was found.

## Stats

- Views: 159
- Downloads: 11
- Favorites: 0
- Popularity score: 0