Add Agentation skills - #52
Conversation
There was a problem hiding this comment.
Pull request overview
Adds two new RoleModel skill definitions to support installing and using the Agentation visual feedback toolbar (including an autonomous “self-driving” critique mode), and updates the repository’s skill index/docs accordingly.
Changes:
- Introduces
agentationskill with setup guidance for React/Next.js and non-React hosts (dev-only React + dev-only bundle entry). - Introduces
agentation-self-drivingskill plus a reference doc describing a two-session workflow (critic + fixer via MCP). - Updates
README.mdandAGENTS.mdto list and describe the new skills.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/agentation/SKILL.md | New skill describing how to install/mount the Agentation toolbar and keep it dev-only |
| skills/agentation-self-driving/SKILL.md | New skill for autonomous browser-driven annotation workflow using agent-browser |
| skills/agentation-self-driving/references/two-session-workflow.md | Reference guide for coordinating a “critic” session and a “fixer” session via MCP |
| README.md | Adds the two new skills to the public skill table + “designed to complement” section |
| AGENTS.md | Adds bullets for the new skills and documents the pairing convention |
Suppressed comments (1)
skills/agentation/SKILL.md:68
- Same issue as the App Router snippet: importing
Agentationat the top level means it can be bundled for production even when the render is gated. Use a dev-only dynamic import/require so the package is not included in production builds.
```tsx
import { Agentation } from "agentation";
{process.env.NODE_ENV === "development" && <Agentation />}
</details>
---
💡 <a href="/RoleModel/rolemodel-skills/new/main?filename=.github/skills/code-review/SKILL.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add a `code-review` agent skill</a> or configure MCP servers for context-aware, tailored reviews. <a href="https://docs.github.com/en/copilot/how-tos/use-copilot-agents/request-a-code-review/use-code-review#mcp-servers-and-agent-skills" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn more in the docs.</a>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Suppressed comments (1)
Previously missed (1) — in code that hasn't changed since the last review.
skills/agentation-self-driving/SKILL.md:204
- This section duplicates the reference doc (
references/two-session-workflow.md) and pushes SKILL.md over the repo’s “keep SKILL.md under ~200 lines” convention. Linking to the reference keeps the main skill slimmer while still making the workflow discoverable.
## Two-Session Workflow (Full Self-Driving)
With MCP connected (toolbar shows "MCP Connected"), annotations auto-send to any listening agent. This enables:
- **Session 1** (this skill): Watches the page, adds critique annotations in the visible browser
| const isDevelopment = mode === 'development' | ||
|
|
||
| entry: { | ||
| application: './app/javascript/application.js', | ||
| ...(isDevelopment && { agentation: './app/javascript/agentation.js' }) | ||
| } |
| --- | ||
| name: agentation-self-driving | ||
| description: Autonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to autonomously add design feedback annotations to a web page via the browser. Requires the Agentation toolbar to be mounted on the target page (run /agentation first — it installs React as a dev dependency when the host app is not already React) and the agent-browser skill to be available. | ||
| allowed-tools: Bash(agent-browser:*) Bash(command -v agent-browser:*) Read |
The setup skill's snippets were transcribed from the tarsco_bolted_tank install, which works because RoleModel's webpack.config.js declares a module-scope `mode` and writes to app/assets/builds for sprockets to serve. Neither holds in the other hosts the skill advertised: shakapacker's generated config has no `mode` binding and no top-level `entry` to spread into, and packs need javascript_pack_tag rather than javascript_include_tag. Scope the claims to what's verified and say what changes elsewhere. Also: - Stop and report when React is present but below the >=18 peer floor, instead of mounting against a react-dom/client that doesn't exist. - Check for existing configuration before installing anything. - Clean $OUT before the production verification build (guarded by git check-ignore) so a stale dev artifact isn't a false failure, and drop the react-dom grep — production output is minified, so "no matches" was never evidence. - Give agent-browser's real install (vercel-labs CLI, not a skill). - Drop upstream's symlink Install section; installation is in the README. - Link references/two-session-workflow.md so it actually gets read. - Comma-separate allowed-tools. Both skills now carry an upstream provenance note pinning the fork point, since the toolbar internals they depend on are private. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
wesrich
left a comment
wesrich
left a comment
There was a problem hiding this comment.
A few small suggestions before merging:
1. Re-mount listeners don't match the Notes' claim (skills/agentation/SKILL.md)
Small thing: the Notes claim these listeners cover "Turbo/Hotwire, htmx boosting, Astro view transitions," but the code sample only wires up Turbo's events. If a Django or Astro shop ever wanders into a RoleModel repo, they'd go looking for the re-mount handling this promises and find... nothing 😂 — somewhere out there, one very confused Claude agent is about to have a bad afternoon. Either narrow the wording to Turbo/Hotwire, or toss in the one-liner for the other two so the Notes don't write checks the code can't cash.
2. agentation-self-driving's "Install" section conflicts with the README (skills/agentation-self-driving/SKILL.md)
The ln -s ... ~/.claude/skills/... Install section conflicts with the README's documented installation paths (copy / submodule / skills.sh), assumes $(pwd) is the repo root, and doesn't have a matching section on the agentation skill either — looks like it may be leftover from local testing. Suggest dropping it, or replacing it with a short pointer back to the README's install options.
3. Line-count nit
agentation-self-driving/SKILL.md is 207 lines, just over the repo's own ~200-line guideline in AGENTS.md — trimming the Install section from #2 would bring it back under.
Agentation mixes px and rem against a 16px root. Optics sets the root to 62.5%, so its rem values render at 62.5% while its px values don't -- small text and tight gaps around full-size icons. rem can't be rebased for a subtree and Agentation exposes no sizing custom properties, so a dev-only webpack loader bakes the rem values to px instead. Verified in fieldx_vrt: 161 rem values in the bundle, 0 in the emitted dev build, and the toolbar renders at its designed sizes. The rule and the entry are both absent under RAILS_ENV=production. Also notes that this fixes Agentation's own sizing but not host CSS reaching it, since it has no style isolation. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Why
This adds the skills necessary to install Agentation, a design tool where you select a component in the browser, add a short prompt, and get a script you can paste into Claude to make design changes.
Both skills are forks of the upstream skills in benjitaylor/agentation, which cover Next.js only. The work here is making them useful in a RoleModel Rails context: Agentation ships a React component, so a Rails app needs React as a development-only dependency plus a production boundary that keeps it out of the shipped bundle. See the tarsco install for what that looks like in a real app.
What Changed
agentation— installs the toolbar and mounts it via a dev-only bundle entry, then verifies React never reaches a production buildagentation-self-driving— drives that toolbar in a visible browser to leave 5-8 design annotations per pageapp/assets/buildspath that the tarsco install proves, and spelled out what differs under shakapacker and ViteAGENTS.mdandREADME.mdPre-merge
README.mdandAGENTS.md? Any new, renamed, or removed skill needs a row in the README table and a bullet in AGENTS.md. Check the box or replace it withN/Aif this PR touches no skill.