Markdown rendering for skills, refresh button on replay

- react-markdown + remark-gfm for proper skill SKILL.md rendering
- Prose styles matching dark theme (tables, code blocks, blockquotes)
- Strips YAML frontmatter before rendering
- Refresh button in session replay header

app/skills/[name]/page.tsx

@@ -4,11 +4,19 @@ import { use } from "react";
 import { ArrowLeft, FileText, Folder } from "lucide-react";
 import Link from "next/link";
 import { useSkill } from "@/lib/hooks";
+import { Markdown } from "@/components/Markdown";
 
 export default function SkillDetailPage({ params }: { params: Promise<{ name: string }> }) {
   const { name } = use(params);
   const { data, isLoading } = useSkill(name);
 
+  // Strip YAML frontmatter for rendering
+  let content = data?.content || "";
+  if (content.startsWith("---")) {
+    const end = content.indexOf("---", 3);
+    if (end > 0) content = content.slice(end + 3).trim();
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
@@ -40,10 +48,8 @@ export default function SkillDetailPage({ params }: { params: Promise<{ name: st
               )}
             </div>
           )}
-          <div className="card p-4">
-            <pre className="text-[13px] whitespace-pre-wrap leading-relaxed font-sans overflow-x-auto" style={{ color: "var(--text-1)" }}>
-              {data.content}
-            </pre>
+          <div className="card p-4 overflow-x-hidden">
+            <Markdown content={content} />
           </div>
         </>
       ) : (