test(Snyk): security agent testings (#607)

Author: clukhei

.claude/commands/component-authoring

@@ -0,0 +1 @@
+../../.github/skills/component-authoring

.github/workflows/snyk-agent-scan.yml

@@ -0,0 +1,41 @@
+name: Snyk Agent Scan
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  snyk-agent-scan:
+    name: Snyk Agent Scan
+    runs-on: ubuntu-22.04
+    continue-on-error: true
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.18.0"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+
+      - name: Run Snyk Agent Scan
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+          GIT_BASE_SHA: ${{ github.event.before }}
+        run: pnpm scan:snyk-agent

.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     "../stories/migration/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/frameworks/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/getting-started/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
+    "../stories/agent-skills/!(*MCPServer*).@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/components/!(*Sidebar*).@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/utilities/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/form-validation/*.@(mdx|stories.@(js|jsx|ts|tsx))",

.vscode/settings.json

@@ -2,7 +2,6 @@
   "workbench.colorCustomizations": {
     "activityBar.background": "#203220",
     "titleBar.activeBackground": "#2C452D",
-    "titleBar.activeForeground": "#FAFCFA"
   },
   "todo-tree.highlights.customHighlight": {
     "TODO": {

docs/AgentSkills.md

@@ -16,11 +16,19 @@ Once installed, your AI assistant can answer questions like:
 
 Run the following command in your project root:
 
+For Govtechies, use <a href="https://software-engineering.gto.tech.gov.sg/handbook/how-to/local-development/developer-cli/" target="_blank">GovTech Developer CLI</a> to install
+
 ```bash
-npx skills add govtechsg/sgds-web-component
+gt apd install sgds
 ```
 
-Select all existing skills from the list. This pulls the latest skills from the `skills/` folder of this repository into your local `.agents/` directory, where compatible AI tools automatically pick them up.
+<!-- For others, 
+
+```bash
+npx skills add govtechsg/sgds-web-component
+``` -->
+
+<!-- Select all existing skills from the list. This pulls the latest skills from the `skills/` folder of this repository into your local `.agents/` directory, where compatible AI tools automatically pick them up. -->
 
 ---
 
@@ -96,10 +104,16 @@ Skills are read by the agent at query time — they do not add runtime dependenc
 
 Run the following command to pull the latest skill updates:
 
+For Govtechies, 
+
+```bash
+gt apd install sgds
+```
+<!-- 
 ```bash
 
 npx skills add govtechsg/sgds-web-component
 
-```
+``` -->
 
-Skills follow the library version. After upgrading `@govtechsg/sgds-web-component`, update skills to ensure the AI agent's knowledge matches the installed version.
+Skills follow the latest library version. After upgrading `@govtechsg/sgds-web-component`, update skills to ensure the AI agent's knowledge matches the installed version.

docs/INSTALLATION.md

@@ -57,10 +57,10 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 <link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/css/sgds.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0" async crossorigin="anonymous" integrity="sha384-EKivL3CQ+YTcruoxwrg9bNMXdIYcM9EBmICwTMUYcbl105u0vnfurPgjWTBNORtm"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0" async crossorigin="anonymous" integrity="sha384-Fac1dcR+ZUsXkpuxOsemc5Ld/Pu6/sHkOKu3fZg/ckl5nxa9o+CQ2gdETEadyjJs"></script>
 
 //or load a single component e.g. Masthead
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-ITgmRQ1eDoGTKD6ytTZVquH/6jBLIuZzFPDjUVaN525LjuJl3zngwzf/hYiDgJbn"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.16.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-NTZt1tFTkbhjjHYUtbUDmLqrKG7WmyhNCm1QhFxafmpPq2e7ozALWTPLO2DhBTSP"></script>
 
 ```
 

package.json

@@ -34,7 +34,8 @@
     "generate:icons": "node scripts/generateIconRegistry.js",
     "chromatic": "chromatic",
     "utility:dev": "tailwindcss -i ./src/css/utility.css -o ./playground/css/utility.css --config tailwind.config.js --watch",
-    "utility:storybook": "tailwindcss -i ./src/css/utility.css -o ./.storybook/utility.css --config tailwind.config.js"
+    "utility:storybook": "tailwindcss -i ./src/css/utility.css -o ./.storybook/utility.css --config tailwind.config.js",
+    "scan:snyk-agent": "tsx scripts/snyk-agent-scan/index.ts"
   },
   "author": "GovTechSG",
   "contributors": [

scripts/snyk-agent-scan/index.ts

@@ -0,0 +1,60 @@
+import * as fs from "fs";
+import { glob } from "fs/promises";
+import { getChangedFiles } from "./utils/git.js";
+import { printChangedFiles, printScanHeader, printSummary } from "./utils/reporter.js";
+import { scanFile, type ScanResult } from "./utils/scanner.js";
+
+const SCAN_PATHS = ["skills/", ".github/skills/"];
+
+async function resolveFiles(): Promise<string[]> {
+  const args = process.argv.slice(2);
+
+  if (args.length > 0) {
+    const files: string[] = [];
+    for (const pattern of args) {
+      for await (const match of glob(pattern)) {
+        files.push(match);
+      }
+    }
+    return files;
+  }
+
+  const baseSha = process.env.GIT_BASE_SHA;
+  if (baseSha) {
+    if (/^0+$/.test(baseSha)) {
+      console.log("No previous commit to diff against, skipping scan.");
+      process.exit(0);
+    }
+    return getChangedFiles(baseSha, SCAN_PATHS);
+  }
+
+  console.error("Usage: pnpm scan:snyk-agent -- <glob|file> [...]\n" + "       Or set GIT_BASE_SHA for CI mode.");
+  process.exit(1);
+}
+
+async function main(): Promise<void> {
+  const allFiles = await resolveFiles();
+  const mdFiles = allFiles.filter(f => f.endsWith(".md") && fs.existsSync(f));
+
+  if (mdFiles.length === 0) {
+    console.log("No .md files to scan, skipping.");
+    process.exit(0);
+  }
+
+  printChangedFiles(mdFiles);
+
+  const results: ScanResult[] = [];
+  for (const file of mdFiles) {
+    printScanHeader(file);
+    const result = scanFile(file);
+    results.push(result);
+    if (result.unauthorized) {
+      printSummary(results);
+      break;
+    }
+  }
+
+  printSummary(results);
+}
+
+main();

scripts/snyk-agent-scan/utils/git.ts

@@ -0,0 +1,9 @@
+import { execSync } from "child_process";
+
+export function getChangedFiles(baseSha: string, paths: string[]): string[] {
+  const pathArgs = paths.map(p => `-- ${p}`).join(" ");
+  const cmd = `git diff --name-only --diff-filter=AM ${baseSha} ${pathArgs}`;
+  const output = execSync(cmd, { encoding: "utf-8" }).trim();
+  if (!output) return [];
+  return output.split("\n").filter(Boolean);
+}

scripts/snyk-agent-scan/utils/reporter.ts

@@ -0,0 +1,53 @@
+import type { ScanResult } from "./scanner.js";
+
+const RED = "\x1b[0;31m";
+const GREEN = "\x1b[0;32m";
+const YELLOW = "\x1b[1;33m";
+const CYAN = "\x1b[0;36m";
+const BOLD = "\x1b[1m";
+const RESET = "\x1b[0m";
+
+export function printChangedFiles(files: string[]): void {
+  console.log(`${CYAN}${BOLD}Changed files:${RESET}`);
+  for (const f of files) console.log(f);
+  console.log();
+}
+
+export function printScanHeader(file: string): void {
+  console.log(`${CYAN}--- Scanning: ${file} ---${RESET}`);
+}
+
+export function printSummary(results: ScanResult[]): void {
+  const passed = results.filter(r => r.passed);
+  const failed = results.filter(r => !r.passed);
+
+  console.log();
+  console.log(`${BOLD}========== Scan Summary ==========${RESET}`);
+
+  if (passed.length > 0) {
+    console.log(`${GREEN}${BOLD}PASSED (${passed.length}):${RESET}`);
+    for (const r of passed) console.log(`  ${GREEN}✔ ${r.file}${RESET}`);
+  }
+
+  const unauthorized = results.filter(r => r.unauthorized);
+
+  if (unauthorized.length > 0) {
+    console.log(`${YELLOW}${BOLD}UNAUTHORIZED (${unauthorized.length}):${RESET}`);
+    for (const r of unauthorized) console.log(`  ${YELLOW}⚠ ${r.file}${RESET}`);
+    console.log(`${YELLOW}${BOLD}SNYK_TOKEN is invalid or missing. Scan results are incomplete.${RESET}`);
+    process.exit(1);
+  }
+
+  if (failed.length > 0) {
+    console.log(`${RED}${BOLD}FAILED (${failed.length}):${RESET}`);
+    for (const r of failed) {
+      console.log(`  ${RED}✘ ${r.file}${RESET}`);
+      console.log(r.output.trimEnd());
+      console.log();
+    }
+    console.log(`${RED}${BOLD}Job failed due to security findings in the files above.${RESET}`);
+    process.exit(1);
+  }
+
+  console.log(`${GREEN}${BOLD}All scans passed.${RESET}`);
+}