一键在 Manus 中运行任何 Skill

开始使用

agentation

Add Agentation visual feedback toolbar to any React project

在 Manus 中运行

概览

Add Agentation visual feedback toolbar to any React project

安装命令

npx skills add https://github.com/bamzc/claude-skills-frontend --skill agentation

复制此命令并粘贴到 Claude Code 中以安装该技能

来源

bamzc/claude-skills-frontend

星标57

分支7

更新时间2026年2月3日 02:46

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

同仓库更多 Skills

同仓库

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-2857

ui-ux-pro-max

bamzc/claude-skills-frontend

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

2026-01-0857

frontend-code-review

bamzc/claude-skills-frontend

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

2026-01-0657

来源

bamzc

bamzc/claude-skills-frontend

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

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