Stats
Actions
Tags
Add Agentation visual feedback toolbar to a Next.js project
How this skill is triggered — by the user, by Claude, or both
Slash command
/anukkrit-skills-cloud:agentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Set up the Agentation annotation toolbar in this project.
Set up the Agentation annotation toolbar in this project.
Check if already installed
agentation in package.json dependenciesnpm install agentation (or pnpm/yarn based on lockfile)Check if already configured
<Agentation or import { Agentation } in src/ or app/Detect framework
app/layout.tsx or app/layout.jspages/_app.tsx or pages/_app.jsAdd 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 />}
Confirm setup
NODE_ENV check ensures Agentation only loads in developmentnpx claudepluginhub anukkrit149/anukkrit-skills --plugin anukkrit-skills-cloudGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.