UX Prototype -- Agentation Adoption

Status: In Progress Repository: ux-prototype Project directory: workspace/projects/ad-hoc/ux-prototype/agentation-adoption/ Created: 2026-02-13, updated 2026-02-18 for Storybook 10

Goal

Integrate Agentation — a visual annotation tool for AI coding agents — into the ux-prototype Storybook site. Reviewers annotate components in-place; a Claude Code skill turns those annotations into GitHub issues and implementation tasks.

Two Integration Points

Part A: Claude Code Skill (agentation-feedback)

The agentation-feedback skill accepts pasted Agentation markdown output (containing CSS selectors, React component paths, and reviewer comments) and:

1. Parses each annotation to extract element path, component hierarchy, comment, intent (fix/change/question/approve), and severity (blocking/important/suggestion).
2. Locates the source files using the component hierarchy.
3. Creates one GitHub issue per annotation in Arda-cards/management.
4. Issues include: classification metadata, annotation details, source location, and suggested implementation approach.

The skill is developed in ux-prototype/tools/agentation-feedback/ and copied to the shared skill library at /workspace/instructions/claude/skills/agentation-feedback/.

Part B: Storybook Toolbar Addon

A custom Storybook toolbar addon adds an Agentation on/off toggle (hidden by default) using the useGlobals pattern. When enabled, an <Agentation /> component wraps all stories.

• Toggle button uses MessageSquare icon with keyboard shortcut Ctrl+Shift+A.
• initialGlobals default is false — the overlay never renders during automated tests unless explicitly toggled.
• onSubmit callback labeled “Copy JSON” copies the full annotation batch to clipboard for pasting into the Claude Code skill.
• Per-annotation copy also available via copyToClipboard: true (default).

Storybook 10 Notes

• ESM-only: imports use storybook/manager-api (not @storybook/manager-api).
• IconButton is deprecated — use Button from @storybook/components.
• Icons come from @storybook/icons, not Lucide.
• Decorator merged into existing default export in preview.ts.

Task Status

#	Description	Status
1	Write agentation-feedback skill	Planned
2	Add schema reference doc	Planned
3	Install agentation@^2	Planned
4	Verify React 19 compatibility	Planned
5	Create toolbar toggle addon	Planned
6	Add conditional decorator and initialGlobals	Planned
7	Wire onSubmit + onCopy clipboard	Planned
8	Add test stories with play functions	Planned
9	Verify no interference with existing stories	Planned
10	Document VRT guard pattern	Planned
11	Document usage in MDX page	Planned
12	Update storybook-mcp.md	Planned
13	Copy skill to shared skill library	Planned

Gate: If agentation@^2 has issues with React 19, adoption is deferred entirely (Decision #7).