Agentation

benjitaylor's avatarfrom benjitaylor
⭐1.2kstars🔀89forks📁View on GitHub🕐Updated Jan 1, 1970
[Developer Tools]

When & Why to Use This Skill

This Claude skill automates the integration of the Agentation visual feedback toolbar into Next.js projects. It streamlines the developer workflow by handling dependency installation, detecting the specific Next.js router architecture (App vs. Pages), and safely injecting the necessary components into the codebase to enable real-time visual annotations in development environments.

Use Cases

  • Rapid UI Feedback Integration: Automatically set up a visual feedback layer in Next.js applications, allowing teams to collaborate on UI/UX changes directly within the browser.
  • Framework-Specific Configuration: Use the agent to detect whether a project utilizes the Next.js App Router or Pages Router and apply the correct code modifications to root layouts or app files.
  • Automated Dependency Management: Streamline the setup process by letting the agent check for, install, and verify the 'agentation' package using the project's preferred package manager.
  • Safe Development Tooling: Ensure that visual feedback tools are only active during development by automatically wrapping components in NODE_ENV checks, preventing accidental production leaks.
nameagentation
descriptionAdd Agentation visual feedback toolbar to a Next.js project

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

  1. Check if already installed

    • Look for agentation in package.json dependencies
    • If not found, run npm install agentation (or pnpm/yarn based on lockfile)

  2. Check if already configured

    • Search for <Agentation or import { Agentation } in src/ or app/
    • If found, report that Agentation is already set up and exit

  3. Detect framework

    • Next.js App Router: has app/layout.tsx or app/layout.js
    • Next.js Pages Router: has pages/_app.tsx or pages/_app.js

  4. Add the component

    For Next.js App Router, add to the root layout:

    import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

    For Next.js Pages Router, add to _app:

    import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && <Agentation />}

  5. Confirm setup

    • Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)

Notes

  • The NODE_ENV check ensures Agentation only loads in development
  • Agentation requires React 18
  • No additional configuration needed — it works out of the box