Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

agentation

Sterne68

Forks8

Aktualisiert3. Februar 2026 um 02:46

Add Agentation visual feedback toolbar to any React project

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

bamzc

bamzc/claude-skills-frontend

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·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

Mehr aus diesem Repository

gleiches 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