القائمة
Agent-agnostic visual feedback tool for AI coding agents to identify and annotate UI elements with structured selectors
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Aradotso/ai-agent-skills --skill agentation-visual-feedbackيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Build AI agents using NVIDIA Object-Oriented Agents framework with Python classes, typed methods, and LLM-driven generation
Local-first personal AI agent with harness, loop, memory, and eval pillars
Real-time voice runtime for AI agents with full-duplex conversation, background task execution, and continuous presence
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | agentation-visual-feedback |
| description | Agent-agnostic visual feedback tool for AI coding agents to identify and annotate UI elements with structured selectors |
| triggers | ["add agentation feedback tool","set up visual annotation for AI agents","install agentation for element selection","configure agentation feedback toolbar","how do I use agentation to annotate UI elements","add visual feedback tool for AI coding","integrate agentation element selector","enable agentation annotation mode"] |
Skill by ara.so — AI Agent Skills collection.
Agentation is an agent-agnostic visual feedback tool that helps developers capture precise UI element references for AI coding agents. It provides click-to-annotate functionality with automatic selector identification, text selection, multi-select, and structured markdown output that includes selectors, positions, and context.
npm install agentation -D
For other package managers:
yarn add agentation -D
# or
pnpm add agentation -D
Add the Agentation component to your app:
import { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}
For Next.js apps, wrap in a client component:
// components/AgentationWrapper.tsx
'use client';
import { Agentation } from 'agentation';
export function AgentationWrapper() {
return <Agentation />;
}
Then add to your layout or page:
// app/layout.tsx
import { AgentationWrapper } from '@/components/AgentationWrapper';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<AgentationWrapper />
</body>
</html>
);
}
Only load Agentation in development:
import { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
{process.env.NODE_ENV === 'development' && <Agentation />}
</>
);
}
<Agentation
position="bottom-right" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
theme="auto" // 'auto' | 'light' | 'dark'
defaultOpen={false} // Start with toolbar expanded
/>
<Agentation
style={{
zIndex: 10000,
bottom: '20px',
right: '20px'
}}
/>
Example output format:
## Element: .sidebar > button.primary
**Selector:** `.sidebar > button.primary`
**Position:** x: 120, y: 340
**Note:** This button should be blue (#0066FF) instead of green
Select specific text content for annotation:
Select multiple related elements at once:
Annotate regions or empty space:
Freeze animations to capture specific states:
// Agentation automatically pauses:
// - CSS animations and transitions
// - requestAnimationFrame loops
// - Video playback
// - GIF animations
When you copy annotations, Agentation provides:
## Feedback Report
### Element 1: Navigation Button
**Selector:** `nav.header > button[aria-label="Menu"]`
**Position:** x: 24, y: 16
**Classes:** `.btn-menu`, `.mobile-only`
**Note:** Button should have hover state with 0.2s transition
### Element 2: Card Title
**Selector:** `.card-container > .card-header > h3`
**Position:** x: 340, y: 280
**Text Content:** "Featured Product"
**Note:** Font size should be 24px, currently 18px
Best practices when using Agentation output with AI agents:
Example prompt to AI agent:
Here's feedback from Agentation:
[paste structured output]
Please update these components according to the notes. The selectors provided
should help you locate the exact code to modify.
Agentation is written in TypeScript and includes full type definitions:
import { Agentation } from 'agentation';
import type { AgentationProps } from 'agentation';
const config: AgentationProps = {
position: 'bottom-right',
theme: 'dark',
defaultOpen: false
};
function App() {
return <Agentation {...config} />;
}
Issue: Agentation toolbar doesn't appear
Solutions:
// Increase z-index if needed
<Agentation style={{ zIndex: 10000000 }} />
Issue: Can't click or select certain elements
Solutions:
Issue: Generated selectors like div > div > span aren't useful
Solutions:
// Better markup for Agentation
<div className="product-card" data-testid="product-card">
<h3 className="product-title">Title</h3>
<button className="add-to-cart-btn">Add to Cart</button>
</div>
Issue: App slows down when Agentation is active
Solutions:
// Load only in development
{process.env.NODE_ENV === 'development' && <Agentation />}
Issue: Agentation theme doesn't match app theme
Solutions:
// Force specific theme
<Agentation theme="dark" />
Agentation requires:
// main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Agentation } from 'agentation';
import App from './App';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
{import.meta.env.DEV && <Agentation />}
</StrictMode>
);
// index.tsx
import { Agentation } from 'agentation';
import App from './App';
root.render(
<React.StrictMode>
<App />
{process.env.NODE_ENV === 'development' && <Agentation />}
</React.StrictMode>
);
// app/root.tsx
import { Agentation } from 'agentation';
export default function App() {
return (
<html>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
{process.env.NODE_ENV === 'development' && <Agentation />}
</body>
</html>
);
}
PolyForm Shield 1.0.0 - Free for non-commercial use. Check the license for commercial usage terms.