Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

gotempsh/add-react-analytics

Name: add-react-analytics
Author: gotempsh

skills/add-react-analytics/SKILL.md

npx skillsauth add gotempsh/temps add-react-analytics

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Add React Analytics

Integrate Temps analytics SDK into React applications with full tracking capabilities.

Installation

npm install @temps-sdk/react-analytics
# or: yarn add / pnpm add / bun add

Framework Setup

Detect the user's framework and apply the appropriate setup:

Next.js App Router (13+)

// app/layout.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TempsAnalyticsProvider basePath="/api/_temps">
          {children}
        </TempsAnalyticsProvider>
      </body>
    </html>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <TempsAnalyticsProvider basePath="/api/_temps">
      <Component {...pageProps} />
    </TempsAnalyticsProvider>
  );
}

Vite / Create React App

// src/main.tsx or src/index.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <TempsAnalyticsProvider basePath="/api/_temps">
    <App />
  </TempsAnalyticsProvider>
);

Remix

// app/root.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function App() {
  return (
    <html lang="en">
      <body>
        <TempsAnalyticsProvider basePath="/api/_temps">
          <Outlet />
        </TempsAnalyticsProvider>
      </body>
    </html>
  );
}

Provider Configuration

<TempsAnalyticsProvider
  basePath="/api/_temps"
  autoTrack={{
    pageviews: true,       // Auto-track page views
    pageLeave: true,       // Track time on page
    speedAnalytics: true,  // Track Web Vitals
    engagement: true,      // Track engagement
    engagementInterval: 30000,
  }}
  debug={process.env.NODE_ENV === 'development'}
>
  {children}
</TempsAnalyticsProvider>

Available Hooks

For detailed API reference, see HOOKS_REFERENCE.md.

Quick Reference

| Hook | Purpose | |------|---------| | useTrackEvent | Track custom events | | useAnalytics | Access analytics context, identify users | | useScrollVisibility | Track element visibility on scroll | | usePageLeave | Track page leave and time on page | | useEngagementTracking | Heartbeat engagement monitoring | | useSpeedAnalytics | Web Vitals (LCP, FCP, CLS, TTFB, INP) | | useTrackPageview | Manual page view tracking |

Track Custom Events

'use client';
import { useTrackEvent } from '@temps-sdk/react-analytics';

function MyComponent() {
  const trackEvent = useTrackEvent();

  const handleClick = () => {
    trackEvent('button_click', {
      button_id: 'subscribe',
      plan: 'premium'
    });
  };

  return <button onClick={handleClick}>Subscribe</button>;
}

Identify Users

'use client';
import { useAnalytics } from '@temps-sdk/react-analytics';
import { useEffect } from 'react';

function UserProfile({ user }) {
  const { identify } = useAnalytics();

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.subscription?.plan
      });
    }
  }, [user, identify]);

  return <div>Profile</div>;
}

Session Recording

For privacy-aware session replay, see SESSION_RECORDING.md.

import { SessionRecordingProvider } from '@temps-sdk/react-analytics';

<SessionRecordingProvider
  enabled={true}
  maskAllInputs={true}
  blockClass="sensitive"
>
  {children}
</SessionRecordingProvider>

Verification Checklist

After implementation:

Check browser DevTools Network tab for /api/_temps requests
Verify events appear in Temps dashboard
Test session recording playback
Confirm Web Vitals are being captured

gotempsh/add-react-analytics

skills/add-react-analytics/SKILL.md

Add Temps analytics to React applications with comprehensive tracking capabilities including page views, custom events, scroll tracking, engagement monitoring, session recording, and Web Vitals performance metrics. Use when the user wants to: (1) Add analytics to a React app (Next.js App Router, Next.js Pages Router, Vite, Create React App, or Remix), (2) Track user events or interactions, (3) Monitor scroll depth or element visibility, (4) Add session recording/replay, (5) Track Web Vitals or performance metrics, (6) Measure user engagement or time on page, (7) Identify users for analytics, (8) Set up product analytics or telemetry. Triggers: "add analytics", "track events", "session recording", "web vitals", "user tracking", "temps analytics", "react analytics".

381 stars

development

Updated Apr 5, 2026

$ install --global

skillsauth

npx skillsauth add gotempsh/temps add-react-analytics

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 5, 2026, 1:59 PM13.4s3 files scanned

SKILL.md

name:: add-react-analytics
description:: |
Add Temps analytics to React applications with comprehensive tracking capabilities including page views, custom events, scroll tracking, engagement monitoring, session recording, and Web Vitals performance metrics. Use when the user wants to:: (1) Add analytics to a React app (Next.js App Router, Next.js Pages Router, Vite, Create React App, or Remix), (2) Track user events or interactions, (3) Monitor scroll depth or element visibility, (4) Add session recording/replay, (5) Track Web Vitals or performance metrics, (6) Measure user engagement or time on page, (7) Identify users for analytics, (8) Set up product analytics or telemetry. Triggers: "add analytics", "track events", "session recording", "web vitals", "user tracking", "temps analytics", "react analytics".

Add React Analytics

Integrate Temps analytics SDK into React applications with full tracking capabilities.

Installation

npm install @temps-sdk/react-analytics
# or: yarn add / pnpm add / bun add

Framework Setup

Detect the user's framework and apply the appropriate setup:

Next.js App Router (13+)

// app/layout.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TempsAnalyticsProvider basePath="/api/_temps">
          {children}
        </TempsAnalyticsProvider>
      </body>
    </html>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <TempsAnalyticsProvider basePath="/api/_temps">
      <Component {...pageProps} />
    </TempsAnalyticsProvider>
  );
}

Vite / Create React App

// src/main.tsx or src/index.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <TempsAnalyticsProvider basePath="/api/_temps">
    <App />
  </TempsAnalyticsProvider>
);

Remix

// app/root.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function App() {
  return (
    <html lang="en">
      <body>
        <TempsAnalyticsProvider basePath="/api/_temps">
          <Outlet />
        </TempsAnalyticsProvider>
      </body>
    </html>
  );
}

Provider Configuration

<TempsAnalyticsProvider
  basePath="/api/_temps"
  autoTrack={{
    pageviews: true,       // Auto-track page views
    pageLeave: true,       // Track time on page
    speedAnalytics: true,  // Track Web Vitals
    engagement: true,      // Track engagement
    engagementInterval: 30000,
  }}
  debug={process.env.NODE_ENV === 'development'}
>
  {children}
</TempsAnalyticsProvider>

Available Hooks

For detailed API reference, see HOOKS_REFERENCE.md.

Quick Reference

Track Custom Events

'use client';
import { useTrackEvent } from '@temps-sdk/react-analytics';

function MyComponent() {
  const trackEvent = useTrackEvent();

  const handleClick = () => {
    trackEvent('button_click', {
      button_id: 'subscribe',
      plan: 'premium'
    });
  };

  return <button onClick={handleClick}>Subscribe</button>;
}

Identify Users

'use client';
import { useAnalytics } from '@temps-sdk/react-analytics';
import { useEffect } from 'react';

function UserProfile({ user }) {
  const { identify } = useAnalytics();

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.subscription?.plan
      });
    }
  }, [user, identify]);

  return <div>Profile</div>;
}

Session Recording

For privacy-aware session replay, see SESSION_RECORDING.md.

import { SessionRecordingProvider } from '@temps-sdk/react-analytics';

<SessionRecordingProvider
  enabled={true}
  maskAllInputs={true}
  blockClass="sensitive"
>
  {children}
</SessionRecordingProvider>

Verification Checklist

After implementation:

Check browser DevTools Network tab for /api/_temps requests
Verify events appear in Temps dashboard
Test session recording playback
Confirm Web Vitals are being captured

Related Skills

gotempsh/temps-plugin

tools

VerifiedTrustedCommunity

Build external plugins for the Temps deployment platform. Use when the user wants to create, modify, or debug a Temps plugin binary — a standalone Rust process that communicates with Temps over a Unix domain socket. Also use when the user mentions "temps plugin", "external plugin", "plugin binary", "plugin for temps", "plugin UI", or asks about plugin architecture, plugin events, plugin manifest, or plugin SDK. Covers the full lifecycle: project scaffolding, manifest, router, events, SQLite persistence, embedded React UI, build.rs, testing, and deployment into the plugins directory.

381SKILL.mdUpdated Apr 5, 2026

gotempsh/temps-plugin

gotempsh/temps-platform-setup

tools

VerifiedTrustedCommunity

Install, configure, and manage the Temps deployment platform and CLI. Covers self-hosted Temps installation, CLI setup (bunx @temps-sdk/cli), initial configuration, user management, and platform administration. Use when the user wants to: (1) Install Temps on their server, (2) Set up the Temps CLI, (3) Configure Temps for the first time, (4) Manage Temps platform settings, (5) Create admin users, (6) Configure DNS providers, (7) Set up TLS certificates. Triggers: "install temps", "setup temps", "temps cli", "configure temps", "temps platform", "self-hosted deployment platform".

381SKILL.mdUpdated Apr 5, 2026

gotempsh/temps-platform-setup

gotempsh/temps-mcp-setup

tools

VerifiedTrustedCommunity

Configure the Temps MCP server to enable AI assistants to interact with the Temps platform. Provides tools for listing projects, viewing project details, and managing deployments directly from Claude or other MCP-compatible clients. Use when the user wants to: (1) Set up Temps MCP server, (2) Configure Claude to manage Temps projects, (3) Add Temps tools to their AI assistant, (4) Enable AI-powered deployment management, (5) Connect Claude Desktop to Temps, (6) Use MCP to interact with Temps API. Triggers: "temps mcp", "configure temps tools", "add temps to claude", "temps ai assistant", "mcp server setup".

381SKILL.mdUpdated Apr 5, 2026

gotempsh/temps-mcp-setup

gotempsh/temps-cli

tools

VerifiedTrustedCommunity

Complete command-line reference for managing the Temps deployment platform. Covers all 54+ CLI commands including projects, deployments, environments, services, domains, monitoring, backups, security scanning, error tracking, and platform administration. Use when the user wants to: (1) Find CLI command syntax, (2) Manage projects and deployments via CLI, (3) Configure services and infrastructure, (4) Set up monitoring and logging, (5) Automate deployments with CI/CD, (6) Manage domains and DNS, (7) Configure notifications and webhooks. Triggers: "temps cli", "temps command", "how to use temps", "@temps-sdk/cli", "bunx temps", "npx temps", "temps deploy", "temps projects", "temps services".

381SKILL.mdUpdated Apr 5, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/gotempsh/temps.git

# Copy into Claude Code skills folder (global)
cp -r temps/skills/add-react-analytics ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

gotempsh/temps

381 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT