skills/agentation/SKILL.md
Add Agentation visual feedback toolbar to a Next.js project
npx skillsauth add szoloth/skills 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 developmentcontent-media
Fetch transcripts from YouTube videos for summarization and analysis.
documentation
This skill should be used when reviewing or editing written drafts to ensure they match Sam's personal style guide. It prioritizes voice preservation and anti-beige detection while catching structural gaps. Triggers on requests to review, edit, or improve written content.
tools
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
development
Web search and content extraction using Brave Search. Use when researching topics, finding documentation, extracting article content, or gathering information from the web. No browser required - works headlessly.