Add 260+ Claude Code skills from skills.sh
Complete collection of AI agent skills including: - Frontend Development (Vue, React, Next.js, Three.js) - Backend Development (NestJS, FastAPI, Node.js) - Mobile Development (React Native, Expo) - Testing (E2E, frontend, webapp) - DevOps (GitHub Actions, CI/CD) - Marketing (SEO, copywriting, analytics) - Security (binary analysis, vulnerability scanning) - And many more... Synchronized from: https://skills.sh/ Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
49
agentation/skill.md
Normal file
49
agentation/skill.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
name: agentation
|
||||
description: Add Agentation visual feedback toolbar to a Next.js project
|
||||
---
|
||||
|
||||
# Agentation Setup
|
||||
|
||||
Set up the Agentation annotation toolbar in this project.
|
||||
|
||||
## Steps
|
||||
|
||||
1. **Check if already installed**
|
||||
- Look for `agentation` in package.json dependencies
|
||||
- If not found, run `npm install agentation` (or pnpm/yarn based on lockfile)
|
||||
|
||||
2. **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
|
||||
|
||||
3. **Detect framework**
|
||||
- Next.js App Router: has `app/layout.tsx` or `app/layout.js`
|
||||
- Next.js Pages Router: has `pages/_app.tsx` or `pages/_app.js`
|
||||
|
||||
4. **Add the component**
|
||||
|
||||
For Next.js App Router, add to the root layout:
|
||||
```tsx
|
||||
import { Agentation } from "agentation";
|
||||
|
||||
// Add inside the body, after children:
|
||||
{process.env.NODE_ENV === "development" && <Agentation />}
|
||||
```
|
||||
|
||||
For Next.js Pages Router, add to _app:
|
||||
```tsx
|
||||
import { Agentation } from "agentation";
|
||||
|
||||
// Add after Component:
|
||||
{process.env.NODE_ENV === "development" && <Agentation />}
|
||||
```
|
||||
|
||||
5. **Confirm setup**
|
||||
- Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)
|
||||
|
||||
## Notes
|
||||
|
||||
- The `NODE_ENV` check ensures Agentation only loads in development
|
||||
- Agentation requires React 18
|
||||
- No additional configuration needed — it works out of the box
|
||||
Reference in New Issue
Block a user