Docs/agent setup copy prompt

docs/agent-setup.mdx

@@ -0,0 +1,132 @@
+---
+title: Agent Setup Instructions
+sidebarTitle: Agent Setup
+description: Official agent-executable instructions for installing Webcmd and its bundled skills.
+---
+
+# Set Up Webcmd for an AI Agent
+
+These are the official instructions from AgentR to set up Webcmd for an AI coding agent. The commands below match the installation paths supported by Webcmd.
+
+Complete the applicable steps yourself by running commands directly. Do not ask the user to copy and run commands that you can run. Follow your environment's approval and security policies, and ask the user only when an interactive application step or new-session reload is required.
+
+- Detect the current agent and existing Webcmd installation.
+- Install the Webcmd CLI when it is missing.
+- Install exactly one copy of the bundled Webcmd skills.
+- Verify the CLI and report where the skills were installed.
+
+---
+
+## 1. Check the environment
+
+Run:
+
+```bash
+node --version
+webcmd --version
+```
+
+Webcmd requires Node.js 20 or newer. If `webcmd` is missing, or Node can run the package but Webcmd is not installed, run:
+
+```bash
+npm install -g @agentrhq/webcmd
+```
+
+Do not remove an existing Webcmd installation or overwrite a non-symlink skills directory. If an existing installation blocks setup, explain the exact conflict instead.
+
+---
+
+## 2. Install Webcmd skills
+
+Use exactly one section below. The Webcmd Codex plugin and standalone Codex skill links contain the same bundled skills, so never install both.
+
+### Codex with the Webcmd plugin
+
+If the `webcmd-usage` skill is already available from the installed Webcmd plugin, do not run `webcmd skills add`. The plugin already supplies all bundled Webcmd skills.
+
+Make sure the CLI is available:
+
+```bash
+webcmd --version
+```
+
+If the plugin was just installed, tell the user to start a new Codex task after setup so the plugin skills are loaded.
+
+### Codex without the plugin
+
+Install standalone skill links globally for Codex:
+
+```bash
+webcmd skills add --provider codex --scope user --json
+```
+
+### Claude Code
+
+Install standalone skill links globally for Claude Code:
+
+```bash
+webcmd skills add --provider claude --scope user --json
+```
+
+Tell the user to start a new Claude Code session after setup so the skills are discovered.
+
+### Agents that support `.agents/skills`
+
+If the current harness supports the shared `.agents/skills` convention, run:
+
+```bash
+webcmd skills add --provider agents --scope user --json
+```
+
+### Custom skills directory
+
+If the current harness documents a different skills directory, use its absolute path:
+
+```bash
+webcmd skills add --path <absolute-skills-directory> --scope user --json
+```
+
+Do not guess a custom directory. Use the harness's documented skills location.
+
+---
+
+## 3. Verify the setup
+
+Run:
+
+```bash
+webcmd --version
+webcmd skills list --format json
+webcmd doctor
+```
+
+`webcmd doctor` may report that the browser runtime still needs its first-use download or a site-specific login. That does not mean the CLI or skills installation failed. Report those items separately.
+
+Once done, tell the user:
+
+```text
+┌─ Webcmd Agent Setup Complete ───────────────────────┐
+│  ✓ CLI      <version>                               │
+│  ✓ Skills   <installed path or plugin>              │
+│                                                    │
+│  → Start a new agent task to load Webcmd skills    │
+└────────────────────────────────────────────────────┘
+```
+
+Then suggest this first task:
+
+```text
+Use the webcmd-usage skill to find the best available Webcmd workflow for my request. Reuse an existing command when one fits, and keep the task read-only unless I explicitly approve changes.
+```
+
+---
+
+## Resources
+
+- Webcmd documentation: `https://webcmd.dev/docs/`
+- Quickstart: `https://webcmd.dev/docs/quickstart`
+- Skills: `https://webcmd.dev/docs/skills`
+- Troubleshooting: `https://webcmd.dev/docs/troubleshooting`
+- Source repository: `https://github.com/agentrhq/webcmd`
+
+These instructions are published at `https://webcmd.dev/docs/agent-setup.md` so you can re-verify their authenticity at any time.

docs/index.mdx

@@ -3,7 +3,21 @@ title: Webcmd
 description: Give your agent reusable command surfaces for websites, browser sessions, apps, APIs, and local tools.
 ---
 
-# Webcmd
+import { AgentSetupButton } from "/snippets/agent-setup-button.jsx"
+
+<div className="webcmd-setup-action not-prose">
+  <p>Set up Webcmd in one click.</p>
+  <div className="webcmd-copy-stack">
+    <AgentSetupButton />
+    <div className="webcmd-native-copy-source">
+
+```text
+Fetch and execute the appropriate instructions to set me up for Webcmd from https://webcmd.dev/docs/agent-setup.md
+```
+
+    </div>
+  </div>
+</div>
 
 Webcmd helps your agent reuse a command when one already fits the job, explore an unfamiliar surface when it does not, and turn successful work into a reusable CLI.
 

docs/snippets/agent-setup-button.jsx

@@ -0,0 +1,47 @@
+export const AgentSetupButton = () => {
+  const [status, setStatus] = useState("idle")
+  const resetTimer = useRef(null)
+  const visualButton = useRef(null)
+
+  useEffect(() => {
+    const nativeCopyButton = visualButton.current?.ownerDocument.querySelector(
+      ".webcmd-native-copy-source button[aria-label='Copy the contents from the code block']"
+    )
+
+    if (!nativeCopyButton) return
+
+    nativeCopyButton.setAttribute("aria-label", "Copy the Webcmd agent setup prompt")
+
+    const showCopied = () => {
+      setStatus("copied")
+      if (resetTimer.current) clearTimeout(resetTimer.current)
+      resetTimer.current = setTimeout(() => setStatus("idle"), 1800)
+    }
+
+    nativeCopyButton.addEventListener("click", showCopied)
+
+    return () => {
+      nativeCopyButton.removeEventListener("click", showCopied)
+      if (resetTimer.current) clearTimeout(resetTimer.current)
+    }
+  }, [])
+
+  const label = status === "copied" ? "Prompt copied!" : "Copy prompt"
+
+  return (
+    <span
+      ref={visualButton}
+      className="webcmd-copy-prompt"
+      data-copy-status={status}
+      aria-hidden="true"
+    >
+      <span className="webcmd-agent-icons" aria-hidden="true">
+        <img src="/icons/agents/claude.svg" alt="" noZoom />
+        <img className="webcmd-agent-icon-mono" src="/icons/agents/codex.svg" alt="" noZoom />
+        <img className="webcmd-agent-icon-mono" src="/icons/agents/cursor.svg" alt="" noZoom />
+        <img className="webcmd-agent-icon-mono" src="/icons/agents/opencode.svg" alt="" noZoom />
+      </span>
+      <span aria-live="polite">{label}</span>
+    </span>
+  )
+}

docs/style.css

@@ -88,3 +88,146 @@ pre code {
 .nav-tag-pill-text[data-nav-tag] {
   border-radius: var(--webcmd-sidebar-radius);
 }
+
+.webcmd-setup-action {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  margin: -0.5rem 0 2rem;
+}
+
+.webcmd-setup-action > p {
+  margin: 0;
+  color: #4c4c4c;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.webcmd-native-copy-source {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  pointer-events: none;
+}
+
+.webcmd-copy-stack {
+  position: relative;
+  display: inline-flex;
+}
+
+.webcmd-native-copy-source .code-block,
+.webcmd-native-copy-source [data-floating-buttons],
+.webcmd-native-copy-source [data-floating-buttons] > div {
+  position: absolute !important;
+  inset: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  pointer-events: none;
+}
+
+.webcmd-native-copy-source [data-component-part="code-block-root"],
+.webcmd-native-copy-source [data-fade-overlay] {
+  display: none !important;
+}
+
+.webcmd-native-copy-source button[aria-label] {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 999px !important;
+  opacity: 0;
+  pointer-events: auto;
+}
+
+.webcmd-copy-prompt {
+  display: inline-flex;
+  width: max-content;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  border: 1px solid #111;
+  border-radius: 999px;
+  background: #111;
+  padding: 0 1.125rem;
+  color: #fff;
+  cursor: copy;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+  pointer-events: none;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
+}
+
+.webcmd-copy-stack:hover .webcmd-copy-prompt {
+  border-color: #2f2f2f;
+  background: #2f2f2f;
+}
+
+.webcmd-copy-stack:active .webcmd-copy-prompt {
+  transform: translateY(1px);
+}
+
+.webcmd-copy-stack:focus-within .webcmd-copy-prompt {
+  outline: 2px solid #56c5ff;
+  outline-offset: 3px;
+}
+
+.webcmd-agent-icons {
+  display: inline-flex;
+  height: 1.25rem;
+  align-items: center;
+  gap: 0.25rem;
+  pointer-events: none;
+}
+
+.webcmd-agent-icons img {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+  object-fit: contain;
+  cursor: inherit !important;
+  pointer-events: none;
+  transform: none !important;
+  transition: none !important;
+}
+
+.webcmd-agent-icon-mono {
+  filter: invert(1);
+}
+
+.dark .webcmd-setup-action > p {
+  color: #b9b9b9;
+}
+
+.dark .webcmd-copy-prompt {
+  border-color: #ededed;
+  background: #ededed;
+  color: #151515;
+}
+
+.dark .webcmd-copy-stack:hover .webcmd-copy-prompt {
+  border-color: #fff;
+  background: #fff;
+}
+
+.dark .webcmd-agent-icon-mono {
+  filter: none;
+}
+
+@media (max-width: 640px) {
+  .webcmd-setup-action {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.625rem;
+    margin-top: -0.5rem;
+  }
+}