원클릭으로 Manus에서 모든 스킬 실행

시작하기

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 저장소 열기 Creator 저장소 보기

설치 명령

다운로드

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