feat(ui): add install command snippet and copy functionality to Skill…

src/components/SkillDetailPage.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from '@tanstack/react-router'
 import type { ClawdisSkillMetadata } from 'clawhub-schema'
 import { useAction, useMutation, useQuery } from 'convex/react'
+import { Copy } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { api } from '../../convex/_generated/api'
 import type { Doc, Id } from '../../convex/_generated/dataModel'
@@ -45,6 +46,45 @@ type SkillBySlugResult = {
 
 type SkillFile = Doc<'skillVersions'>['files'][number]
 
+function InstallViaClawhubCard({ slug }: { slug: string }) {
+  const [copied, setCopied] = useState(false)
+  const installCmd = `clawhub install ${slug}`
+
+  const copyInstall = async () => {
+    try {
+      await navigator.clipboard.writeText(installCmd)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      /* clipboard api unavailable */
+    }
+  }
+
+  return (
+    <div className="card">
+      <h2 className="section-title" style={{ fontSize: '1.2rem', margin: 0 }}>
+        Install via clawhub
+      </h2>
+      <div className="skill-install-snippet" style={{ marginTop: 12 }}>
+        <code className="mono">{installCmd}</code>
+        <button
+          type="button"
+          className="skill-install-copy"
+          onClick={copyInstall}
+          aria-label="Copy install command"
+          title="Copy install command"
+        >
+          {copied ? (
+            <span className="skill-install-copied">Copied!</span>
+          ) : (
+            <Copy size={14} aria-hidden="true" />
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
+
 function formatReportError(error: unknown) {
   if (error && typeof error === 'object' && 'data' in error) {
     const data = (error as { data?: unknown }).data
@@ -344,6 +384,10 @@ export function SkillDetailPage({
           osLabels={osLabels}
         />
 
+        {!modInfo?.isMalwareBlocked && !modInfo?.isRemoved ? (
+          <InstallViaClawhubCard slug={skill.slug} />
+        ) : null}
+
         {nixSnippet ? (
           <div className="card">
             <h2 className="section-title" style={{ fontSize: '1.2rem', margin: 0 }}>

src/styles.css

@@ -1993,6 +1993,58 @@ code {
   color: var(--ink-soft);
 }
 
+.skill-install-snippet {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
+  background: var(--surface-muted);
+  font-size: 0.85rem;
+}
+
+.skill-install-snippet code {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.skill-install-copy {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  min-height: 38px;
+  min-width: 38px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink-soft);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.skill-install-copy:hover {
+  background: var(--line);
+  color: var(--ink);
+}
+
+.skill-install-copy:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.skill-install-copied {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--seafoam);
+  white-space: nowrap;
+}
+
 .skill-tag-row {
   display: flex;
   flex-wrap: wrap;