Use this skill whenever the user needs to build and run a React application for Datadog instrumentation. Triggers on mentions of React app setup, React 19 project, Vite React project, sendmoney app, or frontend app development for Datadog testing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/react-instrumentation:setup-reactThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build and run a React 19.1 sendmoney proof-of-concept application with Vite 7.1.
README.mdreferences/eslint.config.jsreferences/index.htmlreferences/package.jsonreferences/public/vite.svgreferences/src/App.cssreferences/src/App.jsxreferences/src/assets/react.svgreferences/src/components/AddPayeeModal.jsxreferences/src/components/PayeesList.jsxreferences/src/components/ResultPage.jsxreferences/src/components/ScamAlertModal.jsxreferences/src/components/SendMoneyForm.jsxreferences/src/datadog-feature-flags.jsreferences/src/datadog-rum.jsreferences/src/hooks/useFeatureFlag.jsreferences/src/index.cssreferences/src/main.jsxreferences/src/services/mockApi.jsreferences/vite.config.jsBuild and run a React 19.1 sendmoney proof-of-concept application with Vite 7.1.
The reference application is a mobile-responsive sendmoney app located in references/.
npm install
npm run dev
The app will start on http://localhost:5173 by default.
npm run build
npm run preview
Key files in references/:
package.json — Dependencies including React 19.1, Vite 7.1vite.config.js — Vite configuration with React pluginsrc/main.jsx — Application entry pointsrc/App.jsx — Main application componentsrc/components/ — SendMoneyForm, PayeesList, AddPayeeModal, ResultPage, ScamAlertModalsrc/services/mockApi.js — Mock API for transaction simulationsrc/hooks/useFeatureFlag.js — Custom hook for feature flag integrationsrc/datadog-rum.js — Datadog RUM initializationsrc/datadog-feature-flags.js — Datadog Feature Flags configuration# Install and start dev server
npm install && npm run dev
# Verify the app loads at http://localhost:5173
# Verify the sendmoney form renders
# Verify mock API endpoints respond (transaction submission)
Cause: Node.js version too old or network issue.
Fix: Ensure Node.js 18+ is installed (node --version). Clear npm cache with npm cache clean --force.
Cause: Port 5173 already in use or missing dependencies.
Fix: Kill the process on port 5173 or run with --port 3000. Re-run npm install.
Cause: Build error or missing React plugin.
Fix: Check terminal for errors. Ensure @vitejs/plugin-react is in devDependencies.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub jek-bao-choo/datadog-agentic-plugins --plugin react-instrumentation