diff --git a/skills/code-prompts.mdx b/skills/code-prompts.mdx
index da306c5..2a0ba0a 100644
--- a/skills/code-prompts.mdx
+++ b/skills/code-prompts.mdx
@@ -20,11 +20,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx"
   </Tab>
 
   <Tab title="Skills">
-    <SkillInstall skill="langwatch/skills/tracing" run="Instrument my code with LangWatch" />
-    <SkillInstall skill="langwatch/skills/evaluations" run="Set up evaluations for my agent" />
-    <SkillInstall skill="langwatch/skills/scenarios" run="Add scenario tests for my agent" />
-    <SkillInstall skill="langwatch/skills/prompts" run="Version my prompts with LangWatch" />
-    <SkillInstall skill="langwatch/skills/analytics" run="How is my agent performing?" />
+    <SkillInstall title="Instrument my agent with open telemetry" skill="langwatch/skills/tracing" slashCommand="/langwatch-tracing" />
+    <SkillInstall title="Write evaluations for my agent" skill="langwatch/skills/evaluations" slashCommand="/langwatch-evaluations" />
+    <SkillInstall title="Write scenario tests and a CI pipeline for my agent" skill="langwatch/skills/scenarios" slashCommand="/langwatch-scenarios" />
+    <SkillInstall title="Version my prompts" skill="langwatch/skills/prompts" slashCommand="/langwatch-prompts" />
+    <SkillInstall title="Do all of the above" skill="langwatch/skills/level-up" slashCommand="/langwatch-level-up" highlighted />
   </Tab>
 
   <Tab title="MCP">
diff --git a/skills/directory.mdx b/skills/directory.mdx
index 8cdcdf8..af6a4db 100644
--- a/skills/directory.mdx
+++ b/skills/directory.mdx
@@ -4,20 +4,19 @@ description: "Get started with LangWatch in seconds. Copy a prompt, install a sk
 sidebarTitle: "Skills Directory"
 ---
 
+import { SkillInstall } from "/snippets/skill-install.jsx"
+
 Don't want to install skills? Copy a ready-to-paste prompt instead: [Code Prompts](/skills/code-prompts) | [Platform Prompts](/skills/platform-prompts)
 
 ## Available Skills
 
 Install any skill with a single command:
 
-| Skill | Install | What it does |
-|-------|---------|-------------|
-| `langwatch/tracing` | `npx skills add langwatch/skills/tracing` | Add LangWatch tracing to your code |
-| `langwatch/evaluations` | `npx skills add langwatch/skills/evaluations` | Set up experiments, evaluators, and monitoring |
-| `langwatch/scenarios` | `npx skills add langwatch/skills/scenarios` | Add agent simulation tests |
-| `langwatch/prompts` | `npx skills add langwatch/skills/prompts` | Version and manage your prompts |
-| `langwatch/analytics` | `npx skills add langwatch/skills/analytics` | Query your agent's performance |
-| `langwatch/level-up` | `npx skills add langwatch/skills/level-up` | All of the above in one go |
+<SkillInstall title="Instrument my agent with open telemetry" skill="langwatch/skills/tracing" slashCommand="/langwatch-tracing" />
+<SkillInstall title="Write evaluations for my agent" skill="langwatch/skills/evaluations" slashCommand="/langwatch-evaluations" />
+<SkillInstall title="Write scenario tests and a CI pipeline for my agent" skill="langwatch/skills/scenarios" slashCommand="/langwatch-scenarios" />
+<SkillInstall title="Version my prompts" skill="langwatch/skills/prompts" slashCommand="/langwatch-prompts" />
+<SkillInstall title="Do all of the above" skill="langwatch/skills/level-up" slashCommand="/langwatch-level-up" highlighted />
 
 <Tip>
   **Starting an agent from scratch?** Use [Better Agents](/better-agents/overview) to scaffold a production-ready project with all LangWatch features built in.
diff --git a/skills/recipes.mdx b/skills/recipes.mdx
index 0ae2f94..2a78e8b 100644
--- a/skills/recipes.mdx
+++ b/skills/recipes.mdx
@@ -19,11 +19,11 @@ import { PROMPTS } from "/snippets/prompts-data.jsx"
   </Tab>
 
   <Tab title="Skills">
-    <SkillInstall skill="langwatch/skills/recipes/improve-setup" run="⭐ What should I do next to improve my agent?" />
-    <SkillInstall skill="langwatch/skills/recipes/debug-instrumentation" run="Debug and improve my agent instrumentation" />
-    <SkillInstall skill="langwatch/skills/recipes/evaluate-multimodal" run="Evaluate my multimodal agent" />
-    <SkillInstall skill="langwatch/skills/recipes/generate-rag-dataset" run="Generate an evaluation dataset from my RAG knowledge base" />
-    <SkillInstall skill="langwatch/skills/recipes/test-compliance" run="Check my agent doesn't give prescriptive advice" />
-    <SkillInstall skill="langwatch/skills/recipes/test-cli-usability" run="Test my CLI is well usable by AI agents" />
+    <SkillInstall title="What should I do next to improve my agent?" skill="langwatch/skills/recipes/improve-setup" slashCommand="/langwatch-improve-setup" highlighted />
+    <SkillInstall title="Debug and improve my agent instrumentation" skill="langwatch/skills/recipes/debug-instrumentation" slashCommand="/langwatch-debug-instrumentation" />
+    <SkillInstall title="Evaluate my multimodal agent" skill="langwatch/skills/recipes/evaluate-multimodal" slashCommand="/langwatch-evaluate-multimodal" />
+    <SkillInstall title="Generate an evaluation dataset from my RAG knowledge base" skill="langwatch/skills/recipes/generate-rag-dataset" slashCommand="/langwatch-generate-rag-dataset" />
+    <SkillInstall title="Check my agent doesn't give prescriptive advice" skill="langwatch/skills/recipes/test-compliance" slashCommand="/langwatch-test-compliance" />
+    <SkillInstall title="Test my CLI is well usable by AI agents" skill="langwatch/skills/recipes/test-cli-usability" slashCommand="/langwatch-test-cli-usability" />
   </Tab>
 </Tabs>
diff --git a/snippets/skill-install.jsx b/snippets/skill-install.jsx
index 0062418..c0f9599 100644
--- a/snippets/skill-install.jsx
+++ b/snippets/skill-install.jsx
@@ -1,66 +1,87 @@
 import React, { useState } from "react";
 
-export const SkillInstall = ({ skill, run }) => {
-  const [copiedInstall, setCopiedInstall] = useState(false);
-  const [copiedRun, setCopiedRun] = useState(false);
+export const SkillInstall = ({ title, skill, slashCommand, highlighted }) => {
+  const [copied, setCopied] = useState(false);
 
   const installCmd = `npx skills add ${skill}`;
 
-  const handleCopyInstall = () => {
+  const handleCopy = () => {
     navigator.clipboard.writeText(installCmd);
-    setCopiedInstall(true);
-    setTimeout(() => setCopiedInstall(false), 2000);
-  };
-
-  const handleCopyRun = () => {
-    navigator.clipboard.writeText(run);
-    setCopiedRun(true);
-    setTimeout(() => setCopiedRun(false), 2000);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
   };
 
   const CopyIcon = ({ copied }) => copied ? (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
   ) : (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
   );
 
-  const rowStyle = {
-    display: "flex", alignItems: "center", justifyContent: "space-between",
-    gap: "8px", padding: "6px 0",
-  };
-
-  const labelStyle = {
-    fontSize: "12px", fontWeight: 600, color: "var(--text-muted, #6b7280)",
-    minWidth: "48px", textTransform: "uppercase",
-  };
-
-  const codeStyle = {
-    fontSize: "13px", fontFamily: "var(--font-mono, monospace)",
-    color: "var(--text-primary, inherit)",
-  };
-
-  const btnStyle = (copied) => ({
-    display: "flex", alignItems: "center", padding: "4px",
-    border: "none", background: "transparent",
-    color: copied ? "var(--success-text, #059669)" : "var(--text-muted, #9ca3af)",
-    cursor: "pointer", transition: "all 0.15s",
-  });
-
   return (
     <div style={{
-      border: "1px solid var(--border-color, #e5e7eb)",
-      borderRadius: "12px", padding: "8px 16px",
-      marginBottom: "8px",
+      border: highlighted ? "1px solid rgba(225, 113, 0, 0.4)" : "1px solid var(--border-color, #e5e7eb)",
+      borderRadius: "12px",
+      padding: "20px 24px",
+      marginBottom: "16px",
+      background: highlighted ? "rgba(225, 113, 0, 0.06)" : "transparent",
     }}>
-      <div style={rowStyle}>
-        <span style={labelStyle}>Install</span>
-        <code style={codeStyle}>{installCmd}</code>
-        <button onClick={handleCopyInstall} style={btnStyle(copiedInstall)}><CopyIcon copied={copiedInstall} /></button>
+      <div style={{
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        marginBottom: "12px",
+      }}>
+        <span style={{
+          fontSize: "16px",
+          fontWeight: 700,
+        }}>{title}</span>
+        <button
+          onClick={handleCopy}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: "4px",
+            border: "none",
+            background: "transparent",
+            color: copied ? "var(--success-text, #059669)" : "var(--text-muted, #9ca3af)",
+            cursor: "pointer",
+            transition: "all 0.15s",
+            flexShrink: 0,
+          }}
+          title="Copy install command"
+        >
+          <CopyIcon copied={copied} />
+        </button>
       </div>
-      <div style={{ borderTop: "1px solid var(--border-color, #e5e7eb)", ...rowStyle }}>
-        <span style={labelStyle}>Run</span>
-        <span style={{ fontSize: "13px" }}>"{run}"</span>
-        <button onClick={handleCopyRun} style={btnStyle(copiedRun)}><CopyIcon copied={copiedRun} /></button>
+
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginBottom: "12px",
+      }}>
+        <span style={{
+          fontSize: "13px",
+          color: "var(--text-muted, #6b7280)",
+          fontFamily: "var(--font-mono, monospace)",
+        }}>&gt;_</span>
+        <code style={{
+          fontSize: "13px",
+          fontFamily: "var(--font-mono, monospace)",
+        }}>{installCmd}</code>
+      </div>
+
+      <div style={{
+        background: highlighted ? "rgba(225, 113, 0, 0.08)" : "var(--border-color, rgba(0, 0, 0, 0.05))",
+        borderRadius: "8px",
+        padding: "10px 14px",
+        fontSize: "13px",
+        color: "var(--text-muted, #6b7280)",
+      }}>
+        Then use <span style={{
+          color: "var(--colors-light, #fe9a00)",
+          fontWeight: 600,
+        }}>{slashCommand}</span> in your coding agent
       </div>
     </div>
   );