skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

agentation

Installs and configures the Agentation visual feedback toolbar in React projects.

1|Updated Aug 18, 2026
Search Tags:#react#next.js#vite#visual feedback#developer tooling#agentation#annotation toolbar
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill agentation-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentation
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/agentation
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill agentation-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agentation.

What problem does it solve? Manually wiring a visual annotation toolbar into a React project requires detecting the framework variant, finding the correct entry file, and adding environment-gated rendering logic. This Skill automates that setup so the Agentation feedback toolbar appears in development without trial and error. ## Core Features & Use Cases - Automatic project detection: Identifies Next.js App Router, Next.js Pages Router, Vite + React, Create React App, or generic React entry points. - Idempotent setup: Checks package.json and existing imports to avoid duplicate installs or configuration. - Development-only rendering: Wraps the component in NODE_ENV or import.meta.env.DEV checks so it never ships to production. - Use Case: A developer wants teammates to leave visual annotations on a staging build; the Skill installs agentation, edits app/layout.tsx, and confirms the floating toolbar appears in the bottom-right corner. ## Quick Start Set up the Agentation annotation toolbar in this React project and confirm it renders only in development mode.

Frequently Asked Questions about agentation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add the Agentation toolbar to a React project?▼

Install the agentation npm package, then render the Agentation component in your root layout or entry file. Gate it behind a development environment check so it only loads during local development.

How to set up Agentation in Next.js App Router?▼

Add the Agentation component to app/layout.tsx after the children element, wrapped in a process.env.NODE_ENV === "development" check. Import it from the agentation package at the top of the file.

Does Agentation work with Vite and Create React App?▼

Yes, Agentation supports any React 18+ project including Vite and Create React App. For Vite, use import.meta.env.DEV as the environment gate; for CRA, use process.env.NODE_ENV.

Will Agentation appear in my production build?▼

No, the setup wraps the component in a development-only environment check. Next.js and CRA use process.env.NODE_ENV, while Vite uses import.meta.env.DEV, so the toolbar never renders in production.

What are the requirements for using Agentation?▼

Agentation requires React 18 or later and has zero dependencies beyond React. No additional configuration is needed after adding the component to your root entry file.

Related Skills

Explore More Software Engineering Skills→
bamzcbamzc
73

agentation

Integrate the Agentation visual feedback toolbar into React projects for element annotation.

Community
Basic
Itinerant18Itinerant18

agentation

Integrate the Agentation annotation toolbar into Next.js projects with MCP server syncing.

Community
Intermediate
coco-researchcoco-research
264

web-design-guidelines

Review UI code against Web Interface Guidelines and flag violations.

Community
Intermediate
wuji-technologywuji-technology

design-handoff

Extract design tokens, component specs, and interaction annotations from Figma prototypes.

Official
Advanced