skillshop 2.0.0 → 2.2.0

package/skills-content/design-system-catalog/extract-components.mjs

@@ -0,0 +1,441 @@
+#!/usr/bin/env node
+
+/**
+ * Universal design system component extractor.
+ *
+ * Extracts React components from any installed design system package.
+ * Primary strategy: parse TypeScript declarations (.d.ts).
+ * Secondary: optional runtime import for sub-component enrichment.
+ *
+ * Usage: node extract-components.mjs <package-name>
+ * Output: JSON to stdout
+ */
+
+import { readFileSync, existsSync } from "fs";
+import { join, dirname, relative, sep } from "path";
+import { createRequire } from "module";
+
+// ── Args ────────────────────────────────────────────────────
+const packageName = process.argv[2];
+if (!packageName) {
+  process.stderr.write("Usage: node extract-components.mjs <package-name>\n");
+  process.exit(1);
+}
+
+// ── Resolve package ─────────────────────────────────────────
+const require_ = createRequire(
+  join(process.env.REPO_ROOT || process.cwd(), "package.json")
+);
+
+let pkgRoot;
+try {
+  const p = require_.resolve(`${packageName}/package.json`);
+  pkgRoot = dirname(p);
+} catch {
+  const fallback = join(
+    process.env.REPO_ROOT || process.cwd(),
+    "node_modules",
+    ...packageName.split("/")
+  );
+  if (existsSync(join(fallback, "package.json"))) {
+    pkgRoot = fallback;
+  } else {
+    process.stderr.write(`Error: package "${packageName}" not found.\n`);
+    process.exit(1);
+  }
+}
+
+const pkgJson = JSON.parse(
+  readFileSync(join(pkgRoot, "package.json"), "utf-8")
+);
+const version = pkgJson.version;
+
+// ── Skip lists ──────────────────────────────────────────────
+
+const SKIP_NAMES = new Set([
+  "Omit", "Pick", "Partial", "Record", "React", "HTMLElement",
+  "PropsWithChildren", "ForwardRefExoticComponent", "FCWithSlotMarker",
+  "Provider", "Consumer", "Fragment", "Suspense", "StrictMode",
+  "Component", "PureComponent", "Element",
+]);
+
+const SKIP_PROPS = new Set([
+  "children", "className", "style", "ref", "key", "as",
+  "dangerouslySetInnerHTML", "suppressHydrationWarning",
+]);
+
+// ── TypeScript declaration parsing (primary) ────────────────
+
+function findTypesEntryPoint() {
+  const candidates = [
+    pkgJson.types,
+    pkgJson.typings,
+  ];
+
+  // Crawl the exports map for type entries
+  if (pkgJson.exports) {
+    const root = pkgJson.exports["."];
+    if (typeof root === "string" && root.endsWith(".d.ts")) {
+      candidates.push(root);
+    } else if (typeof root === "object" && root !== null) {
+      candidates.push(
+        root.types,
+        root.import?.types,
+        root.require?.types,
+        root.node?.types,
+        root.default?.types
+      );
+    }
+  }
+
+  // typesVersions (e.g. {"*": {"*": ["dist/types/*"]}})
+  if (pkgJson.typesVersions) {
+    for (const range of Object.values(pkgJson.typesVersions)) {
+      if (range["*"]) {
+        for (const pattern of range["*"]) {
+          const resolved = pattern.replace("*", "index");
+          candidates.push(resolved);
+        }
+      }
+      if (range["."]) {
+        for (const pattern of range["."]) {
+          candidates.push(pattern.replace("*", "index"));
+        }
+      }
+    }
+  }
+
+  // Common fallback locations
+  candidates.push(
+    "dist/index.d.ts", "dist/index.d.mts", "dist/index.d.cts",
+    "lib/index.d.ts", "index.d.ts", "types/index.d.ts",
+    "dist/cjs/index.d.ts", "dist/esm/index.d.ts"
+  );
+
+  for (const c of candidates.filter(Boolean)) {
+    const resolved = join(pkgRoot, c);
+    if (existsSync(resolved)) return resolved;
+  }
+
+  // Try DefinitelyTyped (@types/*)
+  const typesPackage = packageName.startsWith("@")
+    ? `@types/${packageName.slice(1).replace("/", "__")}`
+    : `@types/${packageName}`;
+  try {
+    return require_.resolve(`${typesPackage}/index.d.ts`);
+  } catch {
+    /* not found */
+  }
+
+  return null;
+}
+
+function resolveImportPath(fromFile, specifier) {
+  const dir = dirname(fromFile);
+  for (const ext of [
+    ".d.ts", ".d.mts", ".d.cts",
+    "/index.d.ts", "/index.d.mts", "/index.d.cts",
+  ]) {
+    const candidate = join(dir, specifier + ext);
+    if (existsSync(candidate)) return candidate;
+  }
+  return null;
+}
+
+/**
+ * Walk the export tree starting from entryFile.
+ * Returns Map<name, { name, sourceFile }>.
+ */
+function parseExports(entryFile, depth = 0, visited = new Set()) {
+  if (depth > 8 || visited.has(entryFile) || !existsSync(entryFile))
+    return new Map();
+  visited.add(entryFile);
+
+  const content = readFileSync(entryFile, "utf-8");
+  const results = new Map();
+
+  for (const line of content.split("\n")) {
+    if (!line.startsWith("export ")) continue;
+    if (line.startsWith("export type ")) continue;
+
+    // export * from './path'
+    const starMatch = line.match(/export\s*\*\s*from\s*['"]([^'"]+)['"]/);
+    if (starMatch) {
+      const resolved = resolveImportPath(entryFile, starMatch[1]);
+      if (resolved) {
+        for (const [k, v] of parseExports(resolved, depth + 1, visited)) {
+          if (!results.has(k)) results.set(k, v);
+        }
+      }
+      continue;
+    }
+
+    // export { Foo, Bar, default as Baz } from './path'
+    const namedFrom = line.match(
+      /export\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/
+    );
+    if (namedFrom) {
+      const resolved = resolveImportPath(entryFile, namedFrom[2]);
+      for (const part of namedFrom[1].split(",").map((s) => s.trim())) {
+        if (part.startsWith("type ")) continue;
+        let name;
+        const asDefault = part.match(/default\s+as\s+(\w+)/);
+        const asRename = part.match(/(\w+)\s+as\s+(\w+)/);
+        const plain = part.match(/^(\w+)$/);
+        if (asDefault) name = asDefault[1];
+        else if (asRename) name = asRename[2];
+        else if (plain) name = plain[1];
+        if (name && /^[A-Z]/.test(name) && !SKIP_NAMES.has(name)) {
+          results.set(name, { name, sourceFile: resolved || entryFile });
+        }
+      }
+      continue;
+    }
+
+    // export declare const/function/class Foo
+    const decl = line.match(
+      /export\s+declare\s+(?:const|function|class)\s+([A-Z]\w+)/
+    );
+    if (decl && !SKIP_NAMES.has(decl[1])) {
+      results.set(decl[1], { name: decl[1], sourceFile: entryFile });
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Extract sub-components from .d.ts content for a compound component.
+ * Handles both property declarations and intersection types.
+ */
+function extractSubComponentsDts(dtsContent, compName) {
+  const subs = [];
+  const seen = new Set();
+
+  // Pattern 1: indented property — `    SubName: ...`
+  for (const line of dtsContent.split("\n")) {
+    const m = line.match(/^\s{2,8}([A-Z][a-zA-Z]+)\s*:/);
+    if (m && !SKIP_NAMES.has(m[1]) && !seen.has(m[1])) {
+      seen.add(m[1]);
+      subs.push(m[1]);
+    }
+  }
+
+  // Pattern 2: intersection — `typeof X & { Cell: ...; Header: ... }`
+  const intersectionRe = /&\s*\{([^}]+)\}/g;
+  let im;
+  while ((im = intersectionRe.exec(dtsContent)) !== null) {
+    const block = im[1];
+    const propRe = /([A-Z][a-zA-Z]+)\s*:/g;
+    let pm;
+    while ((pm = propRe.exec(block)) !== null) {
+      if (!SKIP_NAMES.has(pm[1]) && !seen.has(pm[1])) {
+        seen.add(pm[1]);
+        subs.push(pm[1]);
+      }
+    }
+  }
+
+  return subs;
+}
+
+/**
+ * Extract props from *Props type/interface definitions.
+ */
+function extractPropsDts(dtsContent, compName) {
+  const props = [];
+  const seen = new Set();
+
+  // Match type/interface blocks named {CompName}Props or {CompName}BaseProps
+  const patterns = [
+    new RegExp(
+      `(?:export\\s+)?(?:type|interface)\\s+${compName}(?:Base)?Props[^{]*\\{([^}]+(?:\\{[^}]*\\}[^}]*)*)\\}`,
+      "gs"
+    ),
+  ];
+
+  for (const pattern of patterns) {
+    let match;
+    while ((match = pattern.exec(dtsContent)) !== null) {
+      const block = match[1];
+      const propRe =
+        /(?:\/\*\*[\s\S]*?\*\/\s*)?['"]?(\w+)['"]?\s*\??\s*:\s*([^;\n]+)/g;
+      let pm;
+      while ((pm = propRe.exec(block)) !== null) {
+        const propName = pm[1];
+        let propType = pm[2].trim();
+        if (SKIP_PROPS.has(propName)) continue;
+        if (propName.startsWith("_")) continue;
+        if (seen.has(propName)) continue;
+        if (
+          /^[A-Z]/.test(propName) &&
+          /(?:ForwardRef|FCWith|ExoticComponent|typeof)/.test(propType)
+        )
+          continue;
+
+        propType = propType.replace(/import\([^)]+\)\./g, "");
+        if (propType.length > 80) propType = propType.substring(0, 77) + "...";
+
+        seen.add(propName);
+        props.push({ name: propName, type: propType });
+      }
+    }
+  }
+
+  return props;
+}
+
+/**
+ * Read all relevant .d.ts content for a component.
+ */
+function readComponentDts(sourceFile, compName) {
+  if (!sourceFile || !existsSync(sourceFile)) return "";
+
+  const sources = [];
+  sources.push(readFileSync(sourceFile, "utf-8"));
+
+  const dir = dirname(sourceFile);
+
+  // Also check for types.d.ts in same directory
+  for (const extra of ["types.d.ts", `${compName}.d.ts`]) {
+    const f = join(dir, extra);
+    if (existsSync(f) && f !== sourceFile) {
+      sources.push(readFileSync(f, "utf-8"));
+    }
+  }
+
+  return sources.join("\n");
+}
+
+// ── Auto-categorization ─────────────────────────────────────
+
+const CATEGORY_MAP = {
+  layout: "Layout", layouts: "Layout", grid: "Layout",
+  navigation: "Navigation", nav: "Navigation",
+  action: "Actions", actions: "Actions", menu: "Actions",
+  menus: "Actions", button: "Actions", buttons: "Actions",
+  form: "Forms", forms: "Forms", input: "Forms", inputs: "Forms",
+  data: "Data Display", display: "Data Display", "data-display": "Data Display",
+  feedback: "Feedback",
+  overlay: "Overlays", overlays: "Overlays", modal: "Overlays", dialog: "Overlays",
+  content: "Content", typography: "Typography",
+  utility: "Utilities", utilities: "Utilities",
+  general: "General", common: "General",
+};
+
+function categorizeFromPath(sourceFile) {
+  if (!sourceFile) return "Components";
+
+  const rel = relative(pkgRoot, sourceFile);
+  const parts = rel
+    .split(sep)
+    .filter((p) => !["dist", "lib", "src", "cjs", "esm", "types"].includes(p));
+
+  for (const part of parts) {
+    const lower = part.toLowerCase();
+    if (CATEGORY_MAP[lower]) return CATEGORY_MAP[lower];
+  }
+
+  if (parts.length >= 2) {
+    const parentDir = parts[parts.length - 2].toLowerCase();
+    if (CATEGORY_MAP[parentDir]) return CATEGORY_MAP[parentDir];
+  }
+
+  return "Components";
+}
+
+// ── Runtime enrichment (optional, best-effort) ──────────────
+
+async function tryRuntimeEnrichment(components) {
+  try {
+    const mod = await import(packageName);
+
+    for (const [name, comp] of components) {
+      const value = mod[name];
+      if (!value) continue;
+
+      // Enrich sub-components from runtime (most reliable for compound components)
+      try {
+        const runtimeSubs = [];
+        for (const [subName, subValue] of Object.entries(value)) {
+          if (!/^[A-Z]/.test(subName)) continue;
+          if (SKIP_NAMES.has(subName)) continue;
+          const isSub =
+            typeof subValue === "function" ||
+            (typeof subValue === "object" && subValue?.$$typeof != null) ||
+            (typeof subValue === "object" &&
+              typeof subValue?.render === "function");
+          if (isSub) runtimeSubs.push(subName);
+        }
+
+        if (runtimeSubs.length > 0) {
+          const existing = new Set(comp.subComponents);
+          for (const sub of runtimeSubs) {
+            if (!existing.has(sub)) comp.subComponents.push(sub);
+          }
+        }
+      } catch {
+        /* non-iterable export */
+      }
+    }
+
+    process.stderr.write("Runtime enrichment: success\n");
+  } catch {
+    process.stderr.write(
+      "Runtime enrichment: skipped (import failed, using .d.ts data only)\n"
+    );
+  }
+}
+
+// ── Build component list ────────────────────────────────────
+
+const typesEntry = findTypesEntryPoint();
+
+if (!typesEntry) {
+  process.stderr.write(
+    `Error: no TypeScript declarations found for "${packageName}".\n` +
+      "Ensure the package ships .d.ts files or install @types/* for it.\n"
+  );
+  process.exit(1);
+}
+
+process.stderr.write(`Types entry: ${relative(pkgRoot, typesEntry)}\n`);
+
+const tsExports = parseExports(typesEntry);
+
+process.stderr.write(
+  `Found ${tsExports.size} PascalCase exports in declarations\n`
+);
+
+// Build component map from TypeScript exports
+const components = new Map();
+
+for (const [name, info] of tsExports) {
+  if (name.startsWith("use") || !/^[A-Z]/.test(name)) continue;
+
+  const dtsContent = readComponentDts(info.sourceFile, name);
+
+  components.set(name, {
+    name,
+    importPath: packageName,
+    subComponents: extractSubComponentsDts(dtsContent, name),
+    props: extractPropsDts(dtsContent, name),
+    category: categorizeFromPath(info.sourceFile),
+  });
+}
+
+// Try runtime enrichment for sub-components (best-effort)
+await tryRuntimeEnrichment(components);
+
+// ── Output ──────────────────────────────────────────────────
+
+const output = {
+  packageName,
+  version,
+  totalComponents: components.size,
+  components: [...components.values()].sort((a, b) =>
+    a.name.localeCompare(b.name)
+  ),
+};
+
+process.stdout.write(JSON.stringify(output, null, 2) + "\n");

package/skills-content/design-system-catalog/generate-catalog.sh

@@ -0,0 +1,255 @@
+#!/usr/bin/env bash
+#
+# generate-catalog.sh — Generate a component catalog skill for any design system
+#
+# Usage:
+#   .agents/skills/design-system-catalog/generate-catalog.sh <package-name> [display-name]
+#
+# Examples:
+#   .agents/skills/design-system-catalog/generate-catalog.sh @primer/react "Primer React"
+#   .agents/skills/design-system-catalog/generate-catalog.sh @chakra-ui/react "Chakra UI"
+#   .agents/skills/design-system-catalog/generate-catalog.sh antd "Ant Design"
+
+set -euo pipefail
+
+REPO_ROOT="$(git rev-parse --show-toplevel)"
+
+# Resolve skills base directory — priority: .agents → .github → .claude
+SKILLS_BASE=""
+for candidate in .agents/skills .github/skills .claude/skills; do
+  if [ -d "$REPO_ROOT/$candidate/design-system-catalog" ]; then
+    SKILLS_BASE="$candidate"
+    break
+  fi
+done
+
+if [ -z "$SKILLS_BASE" ]; then
+  echo "Error: design-system-catalog skill not found in .agents/skills, .github/skills, or .claude/skills" >&2
+  exit 1
+fi
+
+SKILL_DIR="$REPO_ROOT/$SKILLS_BASE/design-system-catalog"
+EXTRACTOR="$SKILL_DIR/extract-components.mjs"
+
+PACKAGE_NAME="${1:?Usage: generate-catalog.sh <package-name> [display-name]}"
+DISPLAY_NAME="${2:-}"
+
+# ── Derive names ─────────────────────────────────────────────
+
+# Skill name: strip @, replace / with -, lowercase
+SKILL_NAME="${PACKAGE_NAME#@}"
+SKILL_NAME="${SKILL_NAME////-}"
+SKILL_NAME=$(echo "$SKILL_NAME" | tr '[:upper:]' '[:lower:]')
+CATALOG_SKILL_NAME="${SKILL_NAME}-components-catalog"
+
+# Display name: auto-derive if not provided
+if [ -z "$DISPLAY_NAME" ]; then
+  # @primer/react → Primer React, antd → Antd, @chakra-ui/react → Chakra Ui React
+  DISPLAY_NAME=$(echo "$SKILL_NAME" | sed 's/-/ /g' | awk '{for(i=1;i<=NF;i++) $i=toupper(substr($i,1,1)) tolower(substr($i,2))}1')
+fi
+
+OUTPUT_DIR="$REPO_ROOT/$SKILLS_BASE/$CATALOG_SKILL_NAME"
+OUTPUT_FILE="$OUTPUT_DIR/SKILL.md"
+
+echo "Package:      $PACKAGE_NAME"
+echo "Display name: $DISPLAY_NAME"
+echo "Skill name:   $CATALOG_SKILL_NAME"
+echo "Output dir:   $OUTPUT_DIR"
+echo ""
+
+# ── Validate ─────────────────────────────────────────────────
+
+if [ ! -f "$EXTRACTOR" ]; then
+  echo "Error: extractor not found at $EXTRACTOR" >&2
+  exit 1
+fi
+
+PKG_DIR="$REPO_ROOT/node_modules/${PACKAGE_NAME}"
+if [ ! -d "$PKG_DIR" ]; then
+  echo "Error: $PACKAGE_NAME not installed. Run npm install first." >&2
+  exit 1
+fi
+
+VERSION=$(node -e "console.log(require('$PKG_DIR/package.json').version)" 2>/dev/null || echo "unknown")
+
+# ── Extract components ───────────────────────────────────────
+
+TMP_DIR=$(mktemp -d)
+trap "rm -rf $TMP_DIR" EXIT
+
+echo "Extracting components from $PACKAGE_NAME@$VERSION ..."
+REPO_ROOT="$REPO_ROOT" node "$EXTRACTOR" "$PACKAGE_NAME" > "$TMP_DIR/components.json" 2>"$TMP_DIR/extract.log"
+
+cat "$TMP_DIR/extract.log" >&2
+
+TOTAL=$(node -e "console.log(JSON.parse(require('fs').readFileSync('$TMP_DIR/components.json','utf-8')).totalComponents)")
+
+if [ "$TOTAL" -eq 0 ]; then
+  echo "Error: no components found in $PACKAGE_NAME. Check that the package has TypeScript declarations." >&2
+  exit 1
+fi
+
+echo "Found $TOTAL components."
+
+# ── Format catalog markdown ──────────────────────────────────
+
+COMPONENTS_JSON="$TMP_DIR/components.json" node --input-type=module << 'FORMATTER' > "$TMP_DIR/catalog.md"
+import { readFileSync } from 'fs';
+
+const data = JSON.parse(readFileSync(process.env.COMPONENTS_JSON, 'utf-8'));
+const { packageName, version, components } = data;
+
+// Group components by category
+const groups = {};
+for (const comp of components) {
+  const cat = comp.category || 'Components';
+  if (!groups[cat]) groups[cat] = [];
+  groups[cat].push(comp);
+}
+
+// Sort categories: known categories first, then alphabetical
+const knownOrder = [
+  'Layout', 'Navigation', 'Actions', 'Actions & Menus', 'Forms',
+  'Data Display', 'Feedback', 'Overlays', 'Content', 'Typography',
+  'Utilities', 'General', 'Components',
+];
+const allCategories = Object.keys(groups);
+const sorted = [
+  ...knownOrder.filter(c => allCategories.includes(c)),
+  ...allCategories.filter(c => !knownOrder.includes(c)).sort(),
+];
+
+let md = '';
+md += `## Component Index\n\n`;
+
+let totalCount = 0;
+
+for (const cat of sorted) {
+  const comps = groups[cat];
+  if (!comps || comps.length === 0) continue;
+
+  comps.sort((a, b) => a.name.localeCompare(b.name));
+
+  md += `### ${cat}\n\n`;
+
+  for (const comp of comps) {
+    totalCount++;
+    md += `#### \`${comp.name}\`\n\n`;
+    md += `\`\`\`jsx\nimport { ${comp.name} } from '${comp.importPath}'\n\`\`\`\n\n`;
+
+    if (comp.subComponents.length > 0) {
+      md += '**Sub-components:** ';
+      md += comp.subComponents.map(s => `\`${comp.name}.${s}\``).join(', ');
+      md += '\n\n';
+    }
+
+    if (comp.props.length > 0) {
+      md += '**Props:**\n\n';
+      md += '| Prop | Type |\n';
+      md += '|------|------|\n';
+      for (const prop of comp.props) {
+        const safeType = prop.type.replace(/\|/g, '\\|').replace(/\n/g, ' ');
+        md += `| \`${prop.name}\` | \`${safeType}\` |\n`;
+      }
+      md += '\n';
+    }
+  }
+}
+
+md += '---\n\n';
+md += `_${totalCount} components total from ${packageName}@${version}._\n`;
+
+process.stdout.write(md);
+FORMATTER
+
+# ── Create output skill directory ────────────────────────────
+
+mkdir -p "$OUTPUT_DIR"
+
+# ── Write SKILL.md ───────────────────────────────────────────
+
+cat > "$OUTPUT_FILE" << SKILLEOF
+# ${DISPLAY_NAME} Components Catalog
+
+> Triggered by: ANY code that imports from \`${PACKAGE_NAME}\`, "what ${DISPLAY_NAME} components are available", "${DISPLAY_NAME,,} component list", "${DISPLAY_NAME,,} components", when building UI with ${DISPLAY_NAME}
+
+> Auto-update trigger: When \`package.json\` is modified and \`${PACKAGE_NAME}\` version changes, regenerate this catalog.
+
+## What This Does
+
+Provides a complete catalog of all \`${PACKAGE_NAME}\` components available in this codebase. Each entry includes the component name, import path, sub-components (for compound components), and props with types.
+
+## When This Applies
+
+- Building any new page or component that uses ${DISPLAY_NAME}
+- Deciding which component to use for a UI pattern
+- Looking up props or sub-components for a specific component
+
+## How to Use
+
+1. **Find the right component** — Browse by category or search alphabetically
+2. **Check sub-components** — Compound components list their sub-components (e.g. \`Table.Cell\`)
+3. **Check props** — Each component lists its specific props with types
+4. **Import** — Use the import path shown (always \`${PACKAGE_NAME}\`)
+
+### Regenerating This Catalog
+
+When \`${PACKAGE_NAME}\` is upgraded, regenerate with:
+
+\`\`\`bash
+${SKILLS_BASE}/${CATALOG_SKILL_NAME}/extract-components.sh
+\`\`\`
+
+<!-- CATALOG -->
+<!-- Generated from ${PACKAGE_NAME}@${VERSION} — do not edit manually -->
+<!-- Run ${SKILLS_BASE}/${CATALOG_SKILL_NAME}/extract-components.sh to regenerate -->
+
+---
+
+SKILLEOF
+
+# Append the formatted catalog
+cat "$TMP_DIR/catalog.md" >> "$OUTPUT_FILE"
+
+# ── Write regeneration script ────────────────────────────────
+
+REGEN_SCRIPT="$OUTPUT_DIR/extract-components.sh"
+cat > "$REGEN_SCRIPT" << 'REGENEOF'
+#!/usr/bin/env bash
+#
+# Regenerate the component catalog for PACKAGE_PLACEHOLDER
+#
+# This is a thin wrapper around the shared design-system-catalog extractor.
+# Run this script when the package is upgraded to refresh the catalog.
+
+set -euo pipefail
+
+REPO_ROOT="$(git rev-parse --show-toplevel)"
+
+GENERATOR=""
+for candidate in .agents/skills .github/skills .claude/skills; do
+  if [ -f "$REPO_ROOT/$candidate/design-system-catalog/generate-catalog.sh" ]; then
+    GENERATOR="$REPO_ROOT/$candidate/design-system-catalog/generate-catalog.sh"
+    break
+  fi
+done
+
+if [ -z "$GENERATOR" ]; then
+  echo "Error: design-system-catalog skill not found in .agents/skills, .github/skills, or .claude/skills" >&2
+  echo "The shared extractor is required to regenerate this catalog." >&2
+  exit 1
+fi
+
+exec "$GENERATOR" "PACKAGE_PLACEHOLDER" "DISPLAY_PLACEHOLDER"
+REGENEOF
+
+# Replace placeholders
+sed -i '' "s|PACKAGE_PLACEHOLDER|${PACKAGE_NAME}|g" "$REGEN_SCRIPT"
+sed -i '' "s|DISPLAY_PLACEHOLDER|${DISPLAY_NAME}|g" "$REGEN_SCRIPT"
+chmod +x "$REGEN_SCRIPT"
+
+echo ""
+echo "✅ Generated skill: $CATALOG_SKILL_NAME"
+echo "   Skill file: $OUTPUT_FILE"
+echo "   Regenerate: $REGEN_SCRIPT"
+echo "   Components: $TOTAL from ${PACKAGE_NAME}@${VERSION}"