P3 exit: Computer panel with all 8 apps, themed and deep-linkable

- DevicePanel in the 448px SlidePanel: ?app= routes (home + 8 sub-apps via
  dynamic imports), ?device=full|tablet|phone size toggle, per-agent
  accent-derived wallpaper theme + feTurbulence grain, glassy dock + grid
  home screen, Computer button in the chat header
- Apps: Files (3 drives, real listings), Skills (installed + add from
  library), Routines (list/refresh/empty state), Claw Chat (threads +
  sensitive badge + detail), Settings (push/pop nav: edit profile PATCHes
  the system prompt, Other-Claws access toggle PUTs the policy, confirmed
  destructive delete), Slack (§7.3 pre-connect gate), Add Apps (live
  /api/apps directory + search), Browser (chrome + spec'd empty state)
- /skills Skill Library page + nav entry; curated /api/apps directory
  endpoint; e2e seed gains a catalog skill
- P3 exit E2E (6 journeys): themed home screen + device toggle in URL,
  agent-written file appears in Files, agent-scheduled routine appears in
  Routines, system-prompt edit persists across reload, deep-link cold-load
  of ?app=settings&device=full, every app reachable, library installs

132 Rust + 63 frontend tests + 20 Playwright journeys.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/app/(workspace)/skills/page.tsx

@@ -0,0 +1,51 @@
+import { z } from "zod";
+
+import { apiFetch } from "@/lib/api/http";
+
+const SkillSchema = z.object({
+  id: z.string().uuid(),
+  title: z.string(),
+  author: z.string(),
+  description: z.string(),
+  installs: z.number(),
+});
+
+// The Skill Library (§8.1): catalog + workspace skills, two-column cards.
+export default async function SkillsPage() {
+  const skills = await apiFetch(z.array(SkillSchema), "/api/skills");
+  return (
+    <section className="mx-auto max-w-3xl px-8 py-12">
+      <h1 className="text-2xl font-semibold tracking-tight">Skill Library</h1>
+      <p className="pt-1 text-sm text-muted-foreground">
+        Browse skills published by your team and the catalog. Install them on
+        a claw from its Computer → Skills app.
+      </p>
+      {skills.length === 0 ? (
+        <p className="pt-8 text-sm text-muted-foreground">
+          No skills published yet.
+        </p>
+      ) : (
+        <ul className="grid grid-cols-1 gap-3 pt-6 sm:grid-cols-2">
+          {skills.map((skill) => (
+            <li
+              key={skill.id}
+              className="rounded-(--radius) border border-border bg-surface-warm p-4 shadow-(--shadow-card)"
+            >
+              <p className="text-sm font-medium">{skill.title}</p>
+              <p className="text-xxs text-muted-foreground">
+                by {skill.author}
+              </p>
+              <p className="pt-2 text-xs text-muted-foreground">
+                {skill.description}
+              </p>
+              <p className="pt-2 text-xxs text-muted-foreground">
+                {skill.installs}{" "}
+                {skill.installs === 1 ? "install" : "installs"}
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}