Remove markdoc in favor of mdx

.agents/skills/replay-cli/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: replay-cli
+description: Record your application to gather performance data and debug issues. It enables users to install Replay ClI, record a session, upload and manage them.
+allowed-tools: Bash(replayio:*), mcp__replay
+---
+
+## replay-cli
+
+**Description:** Use when the user wants help with Replay CLI commands for recording, uploading, managing recordings, or authentication. Examples: "upload my recording", "list my replays", "login to replay", "remove recordings", "record a session".
+
+**Instructions:**
+
+You are helping the user with the Replay CLI tool. Here is the complete reference:
+
+### Installation
+
+Install Replay CLI globally using your preferred package manager:
+
+```sh
+npm i -g replayio
+# or
+yarn add -g replayio
+# or
+pnpm i -g replayio
+# or
+bun i -g replayio
+```
+
+### Authentication
+
+Navigate to https://app.replay.io settings page, create your API key and save the API key in the environment variable `REPLAY_API_KEY`.
+
+### Available Commands
+
+| Command              | Arguments    | Options                                                           |
+| -------------------- | ------------ | ----------------------------------------------------------------- |
+| `info`               | –            | –                                                                 |
+| `list`               | –            | `--json`                                                          |
+| `login`              | –            | –                                                                 |
+| `logout`             | –            | –                                                                 |
+| `record`             | `[url]`      | –                                                                 |
+| `remove`             | `[ids...]`   | `-a`, `--all`                                                     |
+| `update`             | –            | –                                                                 |
+| `upload`             | `[ids...]`   | –                                                                 |
+| `upload-source-maps` | `<paths...>` | `-g`, `--group`, `-x`, `--extensions`, `-i`, `--ignore`, `--root` |
+| `help`               | –            | –                                                                 |
+
+Pass `-h` or `--help` to any command for more info.
+
+### Command Details
+
+#### `replayio info`
+
+Displays information about installed Replay dependencies including CLI version and Replay Browser info.
+
+#### `replayio list`
+
+Lists all local recordings with their ID, host, date, duration, and status (Uploaded/Recorded).
+
+- `--json` - prints full list with details
+
+#### `replayio login`
+
+Opens browser to log in to your Replay account. Creates account if needed.
+
+#### `replayio logout`
+
+Logs out from Replay account. Does NOT invalidate API keys in environment variables.
+
+#### `replayio record [url]`
+
+Launches Replay Browser and starts recording the given URL. Default URL is `about:blank`.
+
+- Recording continues until browser is closed
+- If not prompted differently, agent should upload just the main URL
+- Automatically checks for browser/CLI updates
+
+#### `replayio remove [ids...]`
+
+Removes one or more recordings.
+
+- Without arguments: opens interactive menu to select recordings
+- With IDs: removes specified recordings
+- `-a`, `--all` - removes all local recordings
+
+#### `replayio update`
+
+Updates the Replay Browser only. CLI updates are done via npm/yarn/pnpm/bun.
+
+#### `replayio upload [ids...]`
+
+Uploads one or more recordings.
+
+- Without arguments: opens interactive menu to select recordings
+- With IDs: uploads specified recordings
+- Returns URL to view recording after upload
+
+#### `replayio upload-source-maps <paths...>`
+
+Uploads source maps for a Workspace.
+
+- `-g`, `--group <name>` - group name (e.g., commit SHA or release version)
+- `-x`, `--extensions <exts>` - file extensions to process (default: ".js,.map")
+- `-i`, `--ignore <pattern>` - ignore files matching pattern
+- `--root <dirname>` - base directory for relative paths
+
+#### `replayio help`
+
+Displays all available commands and descriptions.
+
+## Core Workflow
+
+**Record and upload a session:**
+
+```sh
+replayio record https://myapp.com
+# After recording, you'll be prompted to upload
+```
+
+**Upload a specific recording:**
+If upload wasn’t done automatically after recording, agent should upload the recording manually using the recording ID from previous step
+
+```sh
+replayio upload <recording-id>
+```
+
+**Run Replay MCP Server to debug your recored application**
+to install the MCP server in Claude, run the following command:
+
+```
+claude --mcp-config "{
+    "mcpServers": {
+      "replay": {
+        "type": "http",
+        "url": "https://dispatch.replay.io/nut/mcp",
+        "headers": {
+          "Authorization": "${REPLAY_API_KEY}"
+        }
+      }
+    }
+  }"
+```

.agents/skills/replay-cypress/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: replay-cypress
+description: Set up and configure Replay for recording Cypress tests with time-travel debugging.
+allowed-tools: Bash(npm:*), Bash(npx:*), Bash(yarn:*), Bash(pnpm:*), Bash(bun:*), mcp__replay
+---
+
+## replay-cypress
+
+**Description:** Use when the user wants to set up Replay for recording Cypress tests, configure the Replay Cypress plugin, or run Cypress tests with the Replay browser. Examples: "set up replay for cypress", "record my cypress tests", "configure replay cypress plugin", "run cypress with replay".
+
+**Instructions:**
+
+You are helping the user set up and configure Replay for recording Cypress tests. Follow these steps in order.
+
+### Step 1: Create a Test Suite Team
+
+Direct the user to visit https://app.replay.io/team/new/tests to create a test suite team. This automatically generates an API key needed for uploading recordings.
+
+### Step 2: Install the Replay Cypress Plugin
+
+Install the plugin as a dev dependency:
+
+```sh
+npm install --save-dev @replayio/cypress
+# or
+yarn add --dev @replayio/cypress
+# or
+pnpm add --save-dev @replayio/cypress
+# or
+bun add --dev @replayio/cypress
+```
+
+### Step 3: Install the Replay Browser
+
+```sh
+npx replayio install
+```
+
+This installs the Replay Chromium browser required for recording.
+
+### Step 4: Store the API Key
+
+The API key must be available as the `REPLAY_API_KEY` environment variable. Save it in a `.env` file at the project root:
+
+```
+REPLAY_API_KEY=<your_api_key>
+```
+
+Alternatively, export it directly:
+
+```sh
+export REPLAY_API_KEY=<your_api_key>
+```
+
+### Step 5: Configure the Cypress Support File
+
+Add the Replay support import to `cypress/support/e2e.js` (or `e2e.ts`):
+
+**CommonJS:**
+
+```js
+require('@replayio/cypress/support')
+```
+
+**ESM:**
+
+```js
+import '@replayio/cypress/support'
+```
+
+### Step 6: Configure cypress.config.js (or cypress.config.ts)
+
+Add the Replay plugin to the Cypress config:
+
+```js
+const { defineConfig } = require('cypress')
+const { plugin: replayPlugin, wrapOn } = require('@replayio/cypress')
+require('dotenv').config()
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(cyOn, config) {
+      const on = wrapOn(cyOn)
+      replayPlugin(on, config, {
+        upload: true,
+        apiKey: process.env.REPLAY_API_KEY,
+      })
+      return config
+    },
+  },
+})
+```
+
+For TypeScript (`cypress.config.ts`):
+
+```ts
+import { defineConfig } from 'cypress'
+import { plugin as replayPlugin, wrapOn } from '@replayio/cypress'
+import 'dotenv/config'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(cyOn, config) {
+      const on = wrapOn(cyOn)
+      replayPlugin(on, config, {
+        upload: true,
+        apiKey: process.env.REPLAY_API_KEY,
+      })
+      return config
+    },
+  },
+})
+```
+
+### Step 7: Run Tests with Replay
+
+```sh
+npx cypress run --browser replay-chromium
+```
+
+Recordings are automatically uploaded and a URL is provided for each recording to view in Replay DevTools.
+
+## Important Notes
+
+- The `upload: true` option in the plugin config enables automatic upload after tests complete.
+- The `wrapOn` wrapper is required — it wraps the Cypress `on` event handler so Replay can hook into test lifecycle events.
+- Cypress events (test starts, commands, assertions) appear in the Replay DevTools timeline.
+- For CI/CD, set the `REPLAY_API_KEY` as a secret environment variable in your CI provider.
+
+### Debugging your recorded application
+
+**Run Replay MCP Server to debug your recored application**
+to install the MCP server in Claude, run the following command:
+
+```
+claude --mcp-config "{
+    "mcpServers": {
+      "replay": {
+        "type": "http",
+        "url": "https://dispatch.replay.io/nut/mcp",
+        "headers": {
+          "Authorization": "${REPLAY_API_KEY}"
+        }
+      }
+    }
+  }"
+```

.agents/skills/replay-mcp/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: replay-mcp
+description: Use Replay MCP to inspect the contents of https://replay.io recordings.
+allowed-tools: Bash(replayio:*), mcp__replay
+---
+
+# Overview
+
+This document provides an overview of the tools available when using Replay MCP
+and how to use these tools to investigate recordings.
+
+Replay MCP is used to inspect the contents of https://replay.io recordings.
+These recordings perfectly capture everything that happened when a browser
+visited an app or other web page. You can explore and investigate the app's behavior
+as if you are a detective with a time machine.
+
+Any question about the app behaved can be answered precisely using data from the
+recording. The most important thing to remember when using Replay MCP to investigate
+a recording is to not jump to conclusions:
+
+1. Frame your task in the form of a question that you need to answer.
+1. Use exploratory tools to identify things that happened in the recording related
+   to the question.
+1. Use explanatory tools to understand why those things happened.
+1. Form a hypothesis and identify data you gathered which justifies that hypothesis.
+1. Explain the answer referring to the data supporting your conclusion.
+
+## Terms
+
+The recording is essentially a gigantic database containing everything that happened
+while the app executed. A couple terms are useful for understanding this database:
+
+- Point: A specific point in the execution of the app. There is a unique point created
+  for every time a JS statement executes or any other interesting event with potential
+  side effects on the app's state.
+
+- Element: A reference for a particular DOM element that is independent of any particular point.
+  Each DOM element has a lifetime for some portion of the recording.
+
+# Exploratory Tools
+
+Exploratory tools are used to discover what happened in the recording and when.
+
+## Errors
+
+Error tools identify major errors that occurred in the app which may cause it to break.
+
+- UncaughtException: An exception was thrown and not caught by anything.
+- ReactException: An exception was thrown while rendering a React component, causing the tree to unmount.
+
+## Timeline
+
+Timeline tools describe sequences of events for what happened across the recording.
+
+- Timeline: Combines data from other timeline tools to show interesting events in order.
+- ConsoleMessages: Shows all messages logged to the console.
+- LocalStorage: Shows all accesses made to local storage.
+- NetworkRequest: Shows all network requests made, or details about a specific request.
+- ReactRenders: Shows all React renders and the rendered components.
+
+## Sources
+
+Source tools get information about the JS sources in the app and what code executed.
+When showing source code in these and other tools, hit counts are shown for each line.
+A blank value is used for lines that have no breakpoints.
+
+- ListSources: Find source files by name.
+- ReadSource: Read the contents of a source and show what code executed.
+- SearchSources: Search the contents of all sources for a pattern and show what code executed.
+
+# Explanatory Tools
+
+Explanatory tools are used to understand why particular things happened in the recording.
+
+## Dependencies
+
+Dependency tools track happens-before relationships between events in the recording.
+This is useful to understand why particular events happened or didn't happen.
+
+- GetStack: Show the on stack frames at a point.
+- ControlDependency: Describe the events in a recording that triggered execution of a point.
+
+## Details
+
+Detail tools show additional details about the app's state at particular points.
+
+- DescribePoint: Describe a point's location and variable values.
+- InspectElement: Describe a DOM element's details.
+- ReactComponents: Describe the React component tree at a point.
+- Logpoint: Show the points and values of an expression every time a statement executed.
+- Evaluate: Evaluate an expression at a particular point.
+
+# Tips
+
+When understanding JS behavior it is a good idea to find code relevant to the question being answered,
+see whether that code executed at all, and get details about the times when it executed.
+The Logpoint tool is extremely useful for this: see the value of the same expression whenever a
+statement executed, look for anything unexpected, and continue investigating from there.
+
+When understanding the timing around a particular event (e.g. why it happened later than desired),
+find a point in the recording associated with the event and use the ControlDependency tool to explore
+the events that had to happen first and any associated delays.