Automates adding the Agentation toolbar to Next.js layouts by router type.
npx skills add https://github.com/heyAyushh/stacc --skill agentation-heyayushh
Please help me install this Agent Skill. Skill: agentation Source: https://github.com/heyAyushh/stacc/tree/main/configs/stacks/nextjs/agentation Command: npx skills add https://github.com/heyAyushh/stacc --skill agentation-heyayushh
This Skill automates the integration of the Agentation visual feedback toolbar into Next.js projects, enabling developers to observe user interactions during development without manual setup.
Install the Agentation package if not present: npm install agentation Detect the router type and update the project:
High-intent search queries and answers about installing and using this skill.
To add a visual feedback toolbar to your Next.js app, install the agentation package and inject the Agentation component into your root layout or _app.js file, ensuring it only renders during development. The setup detects your router type and applies the correct integration automatically.
Yes, the Agentation toolbar works with both Next.js App Router and Pages Router. The setup identifies whether your project uses app/layout.tsx or pages/_app.js and updates the appropriate file to mount the toolbar during development.
You need React 18 compatibility to use the Agentation toolbar in Next.js. The toolbar requires React 18 to render correctly, and the setup ensures the package is installed before injecting the component into your layout.
No, the Agentation toolbar will not appear in your production Next.js build. The integration explicitly checks that process.env.NODE_ENV equals development before rendering, ensuring zero impact on production environments.
To automatically install and set up Agentation in a Next.js project, run npm install agentation if the package is missing. The setup then injects the toolbar component with minimal code changes into your detected layout file.
Your visual feedback toolbar might not render in development mode if the environment variable NODE_ENV is not set to development or if React 18 compatibility is missing. The integration strictly requires both conditions to mount the toolbar.
GLaDO8Inject Agentation toolbar code into Next.js App Router and Pages Router layouts.
Cobalt-MoneyIntegrate the Agentation annotation toolbar into Next.js App Router and Pages Router environments.
yckkkkInject a visual feedback toolbar into Next.js development builds.
heyAyushhAutomates adding the Agentation toolbar to Next.js layouts by router type.
