agentation
Human-in-the-loop UI feedback bridge — humans click elements, agents receive CSS selectors and component trees to fix code.
- Drop a React toolbar into any app; humans annotate UI elements with feedback while agents receive structured CSS selectors, bounding boxes, and React component paths for precise code targeting
- Supports two modes: copy-paste markdown for quick feedback, or MCP watch-loop for iterative agent-driven fixes with acknowledgment and resolution tracking
- Integrates with Claude Code, Codex, Gemini CLI, OpenCode, Cursor, and Windsurf via universal MCP server setup or platform-specific config files
- Includes HTTP REST API (port 4747), SSE event streaming, and webhook delivery for custom integrations; works offline with local session storage and auto-syncs when connected to server
- Pairs with
agent-browserfor autonomous self-driving UI critique cycles and integrates into jeo skill's VERIFY_UI phase for structured evaluation workflows
agentation — Visual UI Feedback Bridge for AI Agents
The missing link between human eyes and agent code.
Instead of describing "the blue button in the sidebar," you hand the agent
.sidebar > button.primary. It cangrepfor that directly.
When to use this skill
- Human needs to point at a UI element and give feedback — without writing selectors
- Running iterative UI/UX review cycles between human and coding agent
- Building a watch-loop where agent auto-fixes every annotation a human leaves
- Capturing CSS selectors, bounding boxes, and React component trees for precise code targeting
- Autonomous design critique via
agent-browser+ self-driving pattern - Integrating visual feedback into agent hooks so annotations auto-appear in agent context
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kweb-accessibility
Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.
12.7Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2K