claude/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 developmentdata-ai
ユーザー向けの回答、要件整理、説明、計画、レビュー、仕様、要約を作成するときに使う。自然言語だけでは条件、状態、多重度、期間、時刻、境界値、制約、推論、計算が曖昧になりうる場合、表、デシジョンテーブル、Mermaid 図、計算式、境界値表で一意化する。推測で補った図表要素は必ず明示する。
tools
Cross-agent messaging via SQLite. Send messages between Claude Code, Codex, Gemini CLI, and other agents. No daemon, no network, no dependencies beyond bash and sqlite3.
development
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
development
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.