Does Agentation work with the Next.js App Router?

Yes, this skill automatically detects and supports both the App Router (layout.tsx) and the Pages Router (_app.tsx).

What are the technical requirements for this skill?

It requires a Next.js project and React 18 or higher to function properly.

Will the toolbar show up in my production environment?

No, the skill includes a NODE_ENV check to ensure the Agentation toolbar only loads during local development.

Is manual configuration needed after running the skill?

No, Agentation works out of the box once the component is injected; you only need to run your development server.

Which package managers are supported?

The skill checks for your project's lockfile to automatically use npm, pnpm, or yarn for installation.

Agentation Visual Feedback

Name: Agentation Visual Feedback
Author: usermaum

byusermaum

0•

Design Tools

Integrates a visual annotation and feedback toolbar into Next.js projects to streamline UI review and collaboration.

Agentation is a specialized Claude Code skill designed to automate the integration of the Agentation visual feedback toolbar into Next.js applications. It intelligently detects whether a project uses the App Router or Pages Router, handles the installation of necessary dependencies via npm, pnpm, or yarn, and injects the required components with built-in environment safety checks. This skill is ideal for frontend teams who want to enable direct, in-browser UI annotations during development without manual boilerplate configuration.

Key Features

01Automated code injection for layout and app files

02Automatic Next.js router detection (App vs. Pages)

03Zero-config setup for visual annotation toolbars

04Smart dependency management using existing project lockfiles

050 GitHub stars

06Development-only environment filtering for production safety

Use Cases

01Adding collaborative annotation tools to development environments

02Enabling visual UI feedback loops for designers and developers

03Streamlining design-to-development handoffs in Next.js

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usermaum/themoon agentation

For use in Claude.ai and ChatGPT