Add agent skills banner to utilities

components/JamCallToAction.tsx

@@ -1,5 +1,6 @@
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { getBannerCopy, JAM_URL } from "./utils/jam-cta";
+import SkillsBanner from "./SkillsBanner";
 
 interface JamCallToActionProps {
   // Page slug under /utilities, used to pick the banner copy.
@@ -37,6 +38,8 @@ export default function JamCallToAction({ tool }: JamCallToActionProps) {
         </a>
       </div>
 
+      <SkillsBanner className="mt-4" />
+
       <p className="mt-4 flex items-center justify-center gap-2 text-sm text-muted-foreground">
         <GitHubLogoIcon />
         <span>

components/SkillsBanner.tsx

@@ -0,0 +1,79 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Check, Copy, Terminal } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCopyToClipboard } from "./hooks/useCopyToClipboard";
+import { SKILLS_URL } from "./utils/jam-cta";
+
+const INSTALL_COMMAND = "npx skills add jamdotdev/skills";
+
+interface SkillsBannerProps {
+  className?: string;
+}
+
+export default function SkillsBanner({ className }: SkillsBannerProps) {
+  const { buttonText, handleCopy } = useCopyToClipboard();
+  const copied = buttonText !== "Copy";
+
+  const githubLink = (
+    <a
+      href={SKILLS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex shrink-0 items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+    >
+      <GitHubLogoIcon aria-hidden="true" />
+      View on GitHub
+    </a>
+  );
+
+  return (
+    <div className={cn("rounded-xl border p-4 text-left sm:p-5", className)}>
+      <div className="flex items-center gap-2">
+        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-foreground">
+          <Terminal className="h-5 w-5" aria-hidden="true" />
+        </span>
+        <p className="min-w-0 flex-1 font-medium leading-5">
+          Teach your coding agent to show its work
+        </p>
+        <span className="hidden sm:inline-flex">{githubLink}</span>
+      </div>
+
+      <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-12">
+        Open-source Jam skills: record a demo, attach proof to the PR, mark up a
+        screenshot, fix a bug from a recording.
+      </p>
+
+      <button
+        type="button"
+        onClick={() => handleCopy(INSTALL_COMMAND)}
+        aria-label={copied ? "Copied" : "Copy install command"}
+        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted py-1.5 pl-3 pr-1.5 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98]"
+      >
+        <span
+          className="shrink-0 leading-5 text-muted-foreground"
+          aria-hidden="true"
+        >
+          $
+        </span>
+        <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
+          {INSTALL_COMMAND}
+        </code>
+        <span
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-md p-1.5 text-muted-foreground"
+          aria-hidden="true"
+        >
+          {copied ? (
+            <>
+              <Check className="h-4 w-4 text-[#5BA832]" />
+              <span className="font-sans text-xs leading-4">Copied</span>
+            </>
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </span>
+      </button>
+
+      <div className="mt-3 sm:hidden">{githubLink}</div>
+    </div>
+  );
+}

components/utils/jam-cta.ts

@@ -4,11 +4,12 @@ export interface JamBannerCopy {
 }
 
 export const JAM_URL = "https://jam.dev?ref=utils-banner";
+export const SKILLS_URL =
+  "https://github.com/jamdotdev/skills?ref=utils-banner";
 
 export const defaultBannerCopy: JamBannerCopy = {
   title: "Fix your next bug faster",
-  description:
-    "Jam captures logs, network requests, and repro steps in one click.",
+  description: "Jam captures logs, network, and repro steps in one click.",
 };
 
 const imageBannerCopy: JamBannerCopy = {

pages/utilities/base64-to-image.tsx

@@ -5,7 +5,7 @@ import { Card } from "@/components/ds/CardComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import GitHubContribution from "@/components/GitHubContribution";
 import Base64ToImageSEO from "@/components/seo/Base64ToImageSEO";
@@ -159,7 +159,7 @@ export default function Base64ToImage() {
         username="devin-ai-integration"
         customUrl="https://app.devin.ai"
       />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <Base64ToImageSEO />

pages/utilities/cam.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { Card } from "@/components/ds/CardComponent";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -473,7 +473,7 @@ export default function CameraUtility() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }

pages/utilities/css-inliner-for-email.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ds/ButtonComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { convertCSSToInline } from "@/components/utils/css-to-inline.utils";
 import { CMDK } from "@/components/CMDK";
@@ -123,7 +123,7 @@ export default function CSSInlinerForEmail() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }

pages/utilities/css-units-converter.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Card } from "@/components/ds/CardComponent";
 import Header from "@/components/Header";
@@ -203,7 +203,7 @@ export default function CSSUnitsConverter() {
       </section>
 
       <GitHubContribution username="franciscoaiolfi" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }

pages/utilities/csv-file-viewer.tsx

@@ -1,4 +1,4 @@
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Button } from "@/components/ds/ButtonComponent";
 import { Card } from "@/components/ds/CardComponent";
@@ -999,11 +999,11 @@ export default function CSVLogsViewer() {
         </>
       )}
 
-      <section className="container max-w-2xl mb-12">
+      <JamCallToAction />
+
+      <section className="container max-w-2xl">
         <CsvViewerSEO />
       </section>
-
-      <CallToActionGrid />
     </main>
   );
 }

pages/utilities/curl-to-javascript-fetch.tsx

@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { toJavaScript } from "curlconverter";
 
@@ -71,7 +71,7 @@ export default function CurlToJavascript() {
           </div>
         </Card>
       </section>
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }

pages/utilities/env-to-netlify-toml.tsx

@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { envToToml } from "@/components/utils/env-to-toml.utils";
 import EnvToTomlSEO from "@/components/seo/EnvToTomlSEO";
@@ -67,7 +67,7 @@ export default function EnvToToml() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <EnvToTomlSEO />

pages/utilities/file-integrity-checker.tsx

@@ -7,7 +7,7 @@ import { Textarea } from "@/components/ds/TextareaComponent";
 import Header from "@/components/Header";
 import UploadIcon from "@/components/icons/UploadIcon";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { CMDK } from "@/components/CMDK";
 import crypto from "crypto";
@@ -346,7 +346,7 @@ export default function FileIntegrityChecker() {
       </section>
 
       <GitHubContribution username="hariharjeevan" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <FileIntegrityCheckerSEO />

pages/utilities/hash-generator.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ds/ButtonComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { CMDK } from "@/components/CMDK";
 import { Combobox } from "@/components/ds/ComboboxComponent";
@@ -262,7 +262,7 @@ export default function HashGenerator() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }

pages/utilities/hex-to-rgb.tsx

@@ -17,7 +17,7 @@ import {
 import { Input } from "@/components/ds/InputComponent";
 import CodeSnippetRow from "@/components/CodeSnippetRow";
 import HexToRgbSEO from "@/components/seo/HexToRgbSEO";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { cn } from "@/lib/utils";
 import RgbToHexSEO from "@/components/seo/RgbToHexSEO";
@@ -181,7 +181,7 @@ export default function HEXtoRGB(props: HEXtoRGBProps) {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         {props.invertOrder ? <RgbToHexSEO /> : <HexToRgbSEO />}

pages/utilities/internet-speed-test.tsx

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import SpeedTestEngine from "@cloudflare/speedtest";
 import { Card } from "@/components/ds/CardComponent";
@@ -210,7 +210,7 @@ export default function InternetSpeedTest() {
         </div>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <InternetSpeedTestSEO />