codex/skills/agentation/SKILL.md
Add Agentation visual feedback toolbar to a Next.js project
npx skillsauth add lilpacy/dotfiles agentationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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 developmentdevelopment
Use when searching the web or reading online documentation. Prefer DuckDuckGo for search and read documents through npx curl.md instead of raw HTML.
testing
Use when writing or editing tests. Tests should be ordered by near-normal, normal, then abnormal cases where applicable, and test names must be Japanese behavior descriptions from a reviewer/user perspective.
development
GoF/オブジェクト指向デザインパターンを関数型プログラミング(pure functions, higher-order functions, ADT, composition, immutability, effect boundaries)でシンプルに整理・設計・リファクタリングする。Strategy/Factory/Adapter/ObserverなどGoF全23パターンのFP置き換え、適用判断、具体事例を提示する必要があるときに使う。
tools
Use when committing, pushing, or preparing PRs. Defines the user's commit workflow, message style discovery, review handoff, and branch/worktree push requirements.