FCE-3561: Advertise the Fishjam Skill across the docs

.githooks/pre-commit

@@ -0,0 +1,21 @@
+#!/bin/sh
+#
+# Pre-commit hook mirroring the fast static checks from CI
+# (.github/workflows/static_check.yml) so commits don't reach CI with
+# formatting, spelling, or type errors.
+#
+# `yarn build` is intentionally NOT run here: it recompiles the git
+# submodules and takes minutes, which is too slow for a commit hook.
+# CI still runs the full build.
+#
+# Bypass in an emergency with:  git commit --no-verify
+
+set -e
+
+echo "pre-commit: running static checks (format, spellcheck, typecheck)..."
+
+yarn format:check
+yarn spellcheck
+yarn typecheck
+
+echo "pre-commit: all static checks passed."

docs/ai-skill.mdx

@@ -0,0 +1,48 @@
+---
+sidebar_position: 1
+title: Build Fishjam apps with AI
+sidebar_label: Build with AI
+description: "The Fishjam Skill gives your AI coding assistant up-to-date, correct guidance for building Fishjam apps: right SDK, real APIs, secure auth."
+slug: /ai-skill
+---
+
+# Build Fishjam apps with AI
+
+The **Fishjam Skill** gives any skills-compatible coding assistant accurate, always-current Fishjam expertise. With it installed, your assistant generates code that uses the right SDK, real API names, and secure auth patterns from the first prompt.
+
+## What it covers
+
+The skill is one entry in Software Mansion's `skills` plugin, and it spans the whole Fishjam stack — backend, web, and mobile:
+
+- **Platform fundamentals** — rooms, peers, tracks, the two-tier auth model, notifications, and the REST API.
+- **Server SDKs (Node & Python)** — including AI voice agents and the Gemini Live integration.
+- **React web client** — the `@fishjam-cloud/react-client` hooks and providers.
+- **React Native / Expo client** — permissions, foreground service, CallKit, screen share, and Picture-in-Picture.
+
+## Install
+
+Install the skill into Claude Code (recommended) or any skills-compatible assistant:
+
+```bash
+npx skills add software-mansion-labs/skills
+```
+
+## How it activates
+
+No command needed. The skill auto-loads whenever you mention Fishjam or a Fishjam SDK/API in your prompts, like `@fishjam-cloud/react-client`, `FishjamClient`, or `managementToken`.
+
+## Why it helps
+
+The skill turns your assistant into a Fishjam specialist:
+
+- **Always current** — it tracks the latest SDKs and APIs, so your assistant builds on today's Fishjam instead of stale examples.
+- **Secure by default** — authentication and tokens follow the patterns we recommend for production, from the first line of code.
+- **Full-stack in one place** — backend, web, and mobile share the same guidance, so features connect cleanly end to end.
+
+:::tip
+The skill follows the latest Fishjam release, so your assistant always works against current SDKs and APIs.
+:::
+
+## Links
+
+- Source and installation details: [software-mansion-labs/skills](https://github.com/software-mansion-labs/skills) (MIT).

docs/index.mdx

@@ -3,6 +3,7 @@ sidebar_position: 0
 ---
 
 import QuickNavigation from "@site/src/components/QuickNavigation";
+import SkillCallout from "@site/src/components/SkillCallout";
 import { items } from "@site/src/content/cardItems";
 import { useVersionedLink } from "@site/src/hooks/useVersionedLink";
 
@@ -18,6 +19,8 @@ To get started, check out one of our guides or browse the examples below:
 
 <QuickNavigation items={items} />
 
+<SkillCallout />
+
 ## Tutorials
 
 <div

docusaurus.config.ts

@@ -239,15 +239,27 @@ const config: Config = {
       },
       items: [
         {
-          type: "doc",
-          docId: "index",
+          to: "/",
           label: "Docs",
           position: "left",
+          // Highlight on all docs pages except the standalone "Build with AI"
+          // page and the API Reference section, which have their own navbar
+          // items below.
+          activeBaseRegex: "^/docs(?=/|$)(?!.*(ai-skill|/api(/|$)))",
         },
         {
           to: "/api/rest",
           label: "API Reference",
           position: "left",
+          // Highlight across the whole /api section (rest, reference, and the
+          // typedoc web/mobile/server pages), not just the linked /api/rest.
+          activeBaseRegex: "/api(/|$)",
+        },
+        {
+          to: "/ai-skill",
+          label: "Build with AI",
+          position: "left",
+          activeBaseRegex: "/ai-skill",
         },
         {
           type: "docsVersionDropdown",

scripts/prepare.sh

@@ -6,6 +6,14 @@ ROOTDIR=$(dirname $(dirname "$(readlink -f $0)"))
 echo $ROOTDIR
 cd $ROOTDIR
 
+# For local development only, point git at the committed hooks directory so
+# the pre-commit static checks run (mirrors static_check.yml). Skipped on CI,
+# which runs the checks itself and never commits; the `|| true` keeps a
+# non-git context (e.g. a source tarball) from aborting this script.
+if [ -z "$CI" ]; then
+  git config core.hooksPath .githooks 2>/dev/null || true
+fi
+
 printf "Synchronising submodules... "
 git submodule sync --recursive >>/dev/null
 git submodule update --init --recursive >>/dev/null

src/components/SkillCallout/index.module.css

@@ -0,0 +1,128 @@
+.callout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin: 2.5rem 0;
+  padding: 1.75rem 2rem;
+  border-radius: calc(var(--ifm-global-radius) * 1.5);
+  background: linear-gradient(135deg, #fcf4e4 0%, #fdeae4 100%);
+  border: 1px solid #f2d7cf;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ifm-color-primary);
+}
+
+.heading {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #221f1c;
+}
+
+.subcopy {
+  margin: 0;
+  max-width: 54ch;
+  font-size: 0.98rem;
+  line-height: 1.55;
+  color: #5b544d;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.85rem 1.5rem;
+}
+
+.command {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  max-width: 100%;
+  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
+  background: #221f1c;
+  border-radius: 8px;
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+}
+
+.prompt {
+  color: var(--ifm-color-primary);
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: 700;
+  user-select: none;
+}
+
+.commandText {
+  min-width: 0;
+  overflow-x: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #f4f1ea;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.86rem;
+  white-space: nowrap;
+}
+
+.copyButton {
+  flex-shrink: 0;
+  min-width: 4.25rem;
+  padding: 0.35rem 0.7rem;
+  border: none;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 10%);
+  color: #f4f1ea;
+  font-family: var(--ifm-font-family-base);
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background var(--ifm-transition-fast) ease,
+    color var(--ifm-transition-fast) ease;
+}
+
+.copyButton:hover {
+  background: var(--ifm-color-primary);
+  color: #fff;
+}
+
+.learnMore {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ifm-color-primary);
+}
+
+.learnMore:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .callout {
+    padding: 1.5rem 1.25rem;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+  }
+
+  .command {
+    width: 100%;
+  }
+
+  .commandText {
+    flex: 1;
+  }
+}

src/components/SkillCallout/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import Link from "@docusaurus/Link";
+import { useVersionedLink } from "@site/src/hooks/useVersionedLink";
+import styles from "./index.module.css";
+
+const INSTALL_COMMAND = "npx skills add software-mansion-labs/skills";
+
+export default function SkillCallout() {
+  const skillHref = useVersionedLink("ai-skill");
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    if (!navigator?.clipboard) return;
+    navigator.clipboard
+      .writeText(INSTALL_COMMAND)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <aside className={styles.callout}>
+      <div className={styles.body}>
+        <p className={styles.eyebrow}>✨ Build with AI</p>
+        <p className={styles.heading}>
+          Your coding assistant, fluent in Fishjam
+        </p>
+        <p className={styles.subcopy}>
+          Install the Fishjam Skill and your coding assistant writes accurate,
+          up-to-date Fishjam code across backend, web, and mobile.
+        </p>
+      </div>
+
+      <div className={styles.actions}>
+        <div className={styles.command}>
+          <span className={styles.prompt} aria-hidden="true">
+            $
+          </span>
+          <code className={styles.commandText}>{INSTALL_COMMAND}</code>
+          <button
+            type="button"
+            className={styles.copyButton}
+            onClick={copy}
+            aria-label="Copy install command"
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+        <Link className={styles.learnMore} href={skillHref}>
+          Learn about the Fishjam Skill →
+        </Link>
+      </div>
+    </aside>
+  );
+}

versioned_docs/version-0.28.0/ai-skill.mdx

@@ -0,0 +1,48 @@
+---
+sidebar_position: 1
+title: Build Fishjam apps with AI
+sidebar_label: Build with AI
+description: "The Fishjam Skill gives your AI coding assistant up-to-date, correct guidance for building Fishjam apps: right SDK, real APIs, secure auth."
+slug: /ai-skill
+---
+
+# Build Fishjam apps with AI
+
+The **Fishjam Skill** gives any skills-compatible coding assistant accurate, always-current Fishjam expertise. With it installed, your assistant generates code that uses the right SDK, real API names, and secure auth patterns from the first prompt.
+
+## What it covers
+
+The skill is one entry in Software Mansion's `skills` plugin, and it spans the whole Fishjam stack — backend, web, and mobile:
+
+- **Platform fundamentals** — rooms, peers, tracks, the two-tier auth model, notifications, and the REST API.
+- **Server SDKs (Node & Python)** — including AI voice agents and the Gemini Live integration.
+- **React web client** — the `@fishjam-cloud/react-client` hooks and providers.
+- **React Native / Expo client** — permissions, foreground service, CallKit, screen share, and Picture-in-Picture.
+
+## Install
+
+Install the skill into Claude Code (recommended) or any skills-compatible assistant:
+
+```bash
+npx skills add software-mansion-labs/skills
+```
+
+## How it activates
+
+No command needed. The skill auto-loads whenever you mention Fishjam or a Fishjam SDK/API in your prompts, like `@fishjam-cloud/react-client`, `FishjamClient`, or `managementToken`.
+
+## Why it helps
+
+The skill turns your assistant into a Fishjam specialist:
+
+- **Always current** — it tracks the latest SDKs and APIs, so your assistant builds on today's Fishjam instead of stale examples.
+- **Secure by default** — authentication and tokens follow the patterns we recommend for production, from the first line of code.
+- **Full-stack in one place** — backend, web, and mobile share the same guidance, so features connect cleanly end to end.
+
+:::tip
+The skill follows the latest Fishjam release, so your assistant always works against current SDKs and APIs.
+:::
+
+## Links
+
+- Source and installation details: [software-mansion-labs/skills](https://github.com/software-mansion-labs/skills) (MIT).

versioned_docs/version-0.28.0/index.mdx

@@ -3,6 +3,7 @@ sidebar_position: 0
 ---
 
 import QuickNavigation from "@site/src/components/QuickNavigation";
+import SkillCallout from "@site/src/components/SkillCallout";
 import { items } from "@site/src/content/cardItems";
 import { useVersionedLink } from "@site/src/hooks/useVersionedLink";
 
@@ -18,6 +19,8 @@ To get started, check out one of our guides or browse the examples below:
 
 <QuickNavigation items={items} />
 
+<SkillCallout />
+
 ## Tutorials
 
 <div