petekp/agentation
skills/agentation/SKILL.md
Add Agentation visual feedback toolbar to a Next.js project
$ install --global
skillsauthnpx skillsauth add petekp/claude-skills agentationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 4:39 AM149.1s1 file scanned
SKILL.md
- name:
- agentation
- description:
- Add Agentation visual feedback toolbar to a Next.js project
Agentation Setup
Set up the Agentation annotation toolbar in this project.
Steps
-
Check if already installed
- Look for
agentationin package.json dependencies - If not found, run
npm install agentation(or pnpm/yarn based on lockfile)
- Look for
-
Check if already configured
- Search for
<Agentationorimport { Agentation }in src/ or app/ - If found, report that Agentation is already set up and exit
- Search for
-
Detect framework
- Next.js App Router: has
app/layout.tsxorapp/layout.js - Next.js Pages Router: has
pages/_app.tsxorpages/_app.js
- Next.js App Router: has
-
Add 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 component setup
- Tell the user the Agentation toolbar component is configured
-
Recommend MCP server setup
- Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
- Recommend one of the following approaches:
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
npx add-mcpand follow the prompts to addagentation-mcpas an MCP server - Claude Code only (interactive wizard):
Run
agentation-mcp initafter installing the package
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
- Tell user to restart their coding agent after MCP setup to load the server
- Explain that once configured, annotations will sync to the agent automatically
Notes
- The
NODE_ENVcheck ensures Agentation only loads in development - Agentation requires React 18
- The MCP server runs on port 4747 by default for the HTTP server
- MCP server exposes tools like
agentation_get_all_pending,agentation_resolve, andagentation_watch_annotations - Run
agentation-mcp doctorto verify setup after installing
Related Skills
petekp/pr-self-review
development
VerifiedTrustedCommunity
Draft short, plainspoken notes in the author's voice that help reviewers understand non-obvious choices, boundaries, and preserved behavior in the author's own pull request or local diff. Use when the user asks to self-review, annotate, or add reviewer context to their PR or changes. Draft locally when no PR exists, and post approved notes as one GitHub review when a PR does exist. Do not use for reviewing someone else's PR, writing code comments, explaining code generally, or drafting a PR description. Never post without explicit approval.
40SKILL.mdUpdated Jul 21, 2026
petekp/tailwind-plugin-craft
tools
VerifiedTrustedCommunity
Design and build pure-CSS (zero-JavaScript) Tailwind CSS v4 plugins of unusual depth and craft. Use when the user wants to create, architect, or refine a Tailwind utility plugin or CSS effect — e.g. "make a tailwind plugin", "build a tw-* plugin", "a CSS-only shimmer/fade/glow/grain/noise utility", "tailwind v4 @utility", "package this effect as a plugin", or wants an effect with surprising visual depth (gradients, masks, filters, SVG filter tricks, scroll-driven animation). Pairs deep CSS/SVG technique research with a bespoke tuning workbench for dialing the effect in. Inspired by tw-fade and tw-shimmer.
40SKILL.mdUpdated Jul 15, 2026
petekp/pr-screenshot-comparison
content-media
VerifiedTrustedCommunity
Create clear, polished before-and-after screenshots for a GitHub pull request. Use when a UI change needs visual proof: capture matching states, crop to the relevant UI, stitch and caption one comparison image, attach it natively to the PR, and keep the image out of the repository.
40SKILL.mdUpdated Jul 15, 2026
petekp/skills/latent-potential
testing
VerifiedTrustedCommunity
--- name: latent-potential description: First-principles, team-of-experts assessment of a software project that surfaces latent potential; underexploited assets, a sharper north star, missing high-leverage capabilities, better framing and messaging. Produces a prioritized, evidence-grounded report with cheap probes, a reframe candidate, a stop-doing list, and an honest skeptic's case. Use whenever the user wants fresh eyes on a project they have built: "what am I sitting on", "what could this be
40SKILL.mdUpdated Jul 15, 2026