Run any Skill in Manus with one click

Get Started

agentation

Stars68

Forks8

UpdatedFebruary 3, 2026 at 02:46

Add Agentation visual feedback toolbar to any React project

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

bamzc

bamzc/claude-skills-frontend

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	agentation
description	Add Agentation visual feedback toolbar to any React project

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Requirements

React 18+
Zero dependencies beyond React

Steps

Check if already installed
- Look for agentation in package.json dependencies
- If not found, run npm install agentation (or pnpm/yarn based on lockfile)
Check if already configured
- Search for <Agentation or import { Agentation } in src/ or app/
- If found, report that Agentation is already set up and exit
Detect project type
- Next.js App Router: has app/layout.tsx or app/layout.js
- Next.js Pages Router: has pages/_app.tsx or pages/_app.js
- Vite + React: has vite.config.ts/js and src/main.tsx/jsx
- Create React App: has src/index.tsx/jsx or src/App.tsx/jsx
- Other React projects: look for main entry file

Add the component

For Next.js App Router, add to app/layout.tsx:

import { Agentation } from "agentation";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <Agentation />}
      </body>
    </html>
  );
}

For Next.js Pages Router, add to pages/_app.tsx:

import { Agentation } from "agentation";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      {process.env.NODE_ENV === "development" && <Agentation />}
    </>
  );
}

For Vite + React, add to src/main.tsx:

import { Agentation } from "agentation";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    {import.meta.env.DEV && <Agentation />}
  </React.StrictMode>
);

For Create React App, add to src/index.tsx:

import { Agentation } from "agentation";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    {process.env.NODE_ENV === "development" && <Agentation />}
  </React.StrictMode>
);

For other React projects, add to the root component or main entry file:

import { Agentation } from "agentation";

// Add at the end of your root component
{process.env.NODE_ENV === "development" && <Agentation />}

Confirm setup
- Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)
- The toolbar should appear in the bottom-right corner of the page

Notes

The environment check ensures Agentation only loads in development
For Vite projects, use import.meta.env.DEV instead of process.env.NODE_ENV
For Next.js, use process.env.NODE_ENV === "development"
No additional configuration needed — it works out of the box
Compatible with any React 18+ project

More from this repository

same repository

amis-builder

bamzc/claude-skills-frontend

amis 低代码框架专家和知识库。**严格触发条件**：用户必须明确提到 'amis'、'低代码'、'百度 amis' 等关键词。**核心能力**：(1) 回答 amis 使用问题（组件用法、属性配置、表达式、事件等），(2) 生成 amis JSON schema（CRUD、表单、卡片、对话框等），(3) 生成 amis 静态 HTML 预览页面（仅当用户明确要求 amis + 预览/静态HTML 时），(4) 调试和优化 amis 配置。**严格禁止触发**：(1) 用户未提及 amis 或低代码，(2) 用户明确要求其他框架（React、Vue、Angular、Vite 等工程化项目），(3) 用户只说'生成表单'但没提 amis。**关键词**：amis、低代码、百度 amis、aisuda、amis schema、amis 组件、amis 预览。

2026-01-2868

frontend-code-review

bamzc/claude-skills-frontend

当用户需要对前端代码进行全面审查时使用此技能，包括 React、Vue、Angular 或原生 JavaScript/TypeScript 项目。适用于代码审查、Pull Request 评审、性能审计、安全检查等场景。

2026-01-0668

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Requirements

React 18+

Zero dependencies beyond React

Steps

Check if already installed

Look for agentation in package.json dependencies
If not found, run npm install agentation (or pnpm/yarn based on lockfile)

Check if already configured

Search for <Agentation or import { Agentation } in src/ or app/
If found, report that Agentation is already set up and exit

Detect project type

Next.js App Router: has app/layout.tsx or app/layout.js
Next.js Pages Router: has pages/_app.tsx or pages/_app.js
Vite + React: has vite.config.ts/js and src/main.tsx/jsx
Create React App: has src/index.tsx/jsx or src/App.tsx/jsx
Other React projects: look for main entry file

Add the component

For Next.js App Router, add to app/layout.tsx:

import { Agentation } from "agentation";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <Agentation />}
      </body>
    </html>
  );
}

For Next.js Pages Router, add to pages/_app.tsx:

import { Agentation } from "agentation";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      {process.env.NODE_ENV === "development" && <Agentation />}
    </>
  );
}

For Vite + React, add to src/main.tsx:

import { Agentation } from "agentation";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    {import.meta.env.DEV && <Agentation />}
  </React.StrictMode>
);

For Create React App, add to src/index.tsx:

import { Agentation } from "agentation";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    {process.env.NODE_ENV === "development" && <Agentation />}
  </React.StrictMode>
);

For other React projects, add to the root component or main entry file:

import { Agentation } from "agentation";

// Add at the end of your root component
{process.env.NODE_ENV === "development" && <Agentation />}

Confirm setup

Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)
The toolbar should appear in the bottom-right corner of the page

Notes

The environment check ensures Agentation only loads in development

For Vite projects, use import.meta.env.DEV instead of process.env.NODE_ENV

For Next.js, use process.env.NODE_ENV === "development"

No additional configuration needed — it works out of the box

Compatible with any React 18+ project