benjitaylor/agentation

Overview

This skill adds the Agentation visual feedback toolbar to a Next.js project so developers can collect annotations and feedback during development. It performs installation checks, detects the Next.js router type, and injects the Agentation component into the appropriate root layout. The result is a floating feedback control available only in development.

How this skill works

The skill inspects package.json for an existing agentation dependency and searches source folders for existing Agentation usage. It detects whether the project uses the Next.js App Router or Pages Router by checking for common layout files. Finally, it inserts the Agentation component into the root layout (_app or app/layout) wrapped in a NODE_ENV development guard so it only appears during development.

When to use it

• You want a lightweight, out-of-the-box feedback toolbar during local development.
• Setting up visual annotation for user testing, bug reporting, or developer notes.
• Integrating feedback without changing production builds or runtime behavior.
• On Next.js projects using React 18 where you need in-context annotations.

Best practices

• Keep the insertion guarded by process.env.NODE_ENV === 'development' to avoid shipping the toolbar to production.
• Verify the project uses React 18 before enabling Agentation to ensure compatibility.
• Use the project’s package manager (npm, pnpm, or yarn) according to the lockfile to install dependencies.
• Search src/ and app/ for existing Agentation imports to avoid duplicate insertion.

Example use cases

• Add a floating feedback button in a local Next.js app to let QA leave precise UI notes.
• Enable designers and PMs to annotate pages during review sessions without modifying code.
• Collect developer-visible bug reports and reproduction steps while running the dev server.
• Quickly onboard a temporary feedback tool in a feature branch for user testing.