Skills (#330)

* Draft skills

* Generate skills

* Changeset

Author: haydenbleasel

.changeset/config.json

@@ -12,6 +12,7 @@
     "@repo/elements",
     "@repo/examples",
     "@repo/typescript-config",
-    "@repo/shadcn-ui"
+    "@repo/shadcn-ui",
+    "@repo/scripts"
   ]
 }

.changeset/wicked-bushes-deny.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Add skills

.github/workflows/generate-skills.yml

@@ -0,0 +1,60 @@
+name: Generate Skills
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'apps/docs/content/docs/components/**/*.mdx'
+      - 'packages/examples/src/**/*.tsx'
+      - 'packages/scripts/**'
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+
+jobs:
+  generate:
+    name: Generate Skills
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Generate GitHub App Token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.AI_ELEMENTS_APP_ID }}
+          private-key: ${{ secrets.AI_ELEMENTS_APP_PRIVATE_KEY }}
+
+      - name: Checkout Repo
+        uses: actions/checkout@v6
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Setup Git User
+        run: |
+          git config --global user.email "ai-elements-bot[bot]@users.noreply.github.com"
+          git config --global user.name "ai-elements-bot[bot]"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Generate Skills
+        run: pnpm --filter @repo/scripts generate-skills
+
+      - name: Commit if changed
+        run: |
+          git add -A
+          if ! git diff --staged --quiet; then
+            git commit -m "chore: regenerate skills"
+            git push
+          fi

packages/scripts/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@repo/scripts",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "generate-skills": "tsx src/generate-skills.ts"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^22.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "5.9.3"
+  }
+}

packages/scripts/src/generate-skills.ts

@@ -0,0 +1,181 @@
+import { existsSync, mkdirSync, rmSync } from 'node:fs';
+import { copyFile, readFile, readdir, writeFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+import matter from 'gray-matter';
+
+const ROOT_DIR = join(import.meta.dirname, '../../..');
+const DOCS_DIR = join(ROOT_DIR, 'apps/docs/content/docs/components');
+const EXAMPLES_DIR = join(ROOT_DIR, 'packages/examples/src');
+const SKILLS_DIR = join(ROOT_DIR, 'skills');
+
+const discoverMdxFiles = async (dir: string): Promise<string[]> => {
+  const results: string[] = [];
+  const entries = await readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...await discoverMdxFiles(fullPath));
+    } else if (entry.name.endsWith('.mdx')) {
+      results.push(fullPath);
+    }
+  }
+
+  return results;
+};
+
+const removePreviews = (content: string): string => {
+  return content.replace(/<Preview\s+path=["'][^"']+["']\s*\/>/g, '');
+};
+
+const replaceInstaller = (content: string): string => {
+  return content.replace(
+    /<ElementsInstaller\s+path=["']([^"']+)["']\s*\/>/g,
+    (_, component) => '```bash\nnpx ai-elements@latest add ' + component + '\n```'
+  );
+};
+
+const parseTypeTableProps = (typeContent: string): Array<{
+  name: string;
+  type: string;
+  description: string;
+  required?: boolean;
+  default?: string;
+}> => {
+  const props: Array<{
+    name: string;
+    type: string;
+    description: string;
+    required?: boolean;
+    default?: string;
+  }> = [];
+
+  const propRegex = /['"]?([^'":\s]+)['"]?\s*:\s*\{([^}]+)\}/g;
+  let match;
+
+  while ((match = propRegex.exec(typeContent)) !== null) {
+    const propName = match[1];
+    const propBody = match[2];
+
+    const descMatch = propBody.match(/description:\s*['"]([^'"]+)['"]/);
+    const typeMatch = propBody.match(/type:\s*['"]([^'"]+)['"]/);
+    const defaultMatch = propBody.match(/default:\s*['"]([^'"]+)['"]/);
+    const requiredMatch = propBody.match(/required:\s*true/);
+
+    props.push({
+      name: propName,
+      type: typeMatch?.[1] || 'unknown',
+      description: descMatch?.[1] || '',
+      required: !!requiredMatch,
+      default: defaultMatch?.[1],
+    });
+  }
+
+  return props;
+};
+
+const replaceTypeTables = (content: string): string => {
+  const typeTableRegex = /<TypeTable\s+type=\{\{([\s\S]*?)\}\}\s*\/>/g;
+
+  return content.replace(typeTableRegex, (_, typeContent) => {
+    const props = parseTypeTableProps(typeContent);
+
+    if (props.length === 0) {
+      return '';
+    }
+
+    const rows = props.map((prop) => {
+      const name = `\`${prop.name}\``;
+      const type = `\`${prop.type}\``;
+      const defaultVal = prop.required
+        ? 'Required'
+        : prop.default
+          ? `\`${prop.default}\``
+          : '-';
+      return `| ${name} | ${type} | ${defaultVal} | ${prop.description} |`;
+    });
+
+    return [
+      '| Prop | Type | Default | Description |',
+      '|------|------|---------|-------------|',
+      ...rows,
+    ].join('\n');
+  });
+};
+
+const transformMdx = (fileContent: string, title: string, description: string): string => {
+  const { content } = matter(fileContent);
+
+  let processedContent = removePreviews(content);
+  processedContent = replaceInstaller(processedContent);
+  processedContent = replaceTypeTables(processedContent);
+
+  const frontmatter = [
+    '---',
+    `name: Using the ${title} component from AI Elements`,
+    `description: ${description}`,
+    '---',
+  ].join('\n');
+
+  return `${frontmatter}\n${processedContent}`;
+};
+
+const findMatchingExamples = async (componentName: string): Promise<string[]> => {
+  const files = await readdir(EXAMPLES_DIR);
+
+  return files.filter((file) => {
+    const fileBasename = file.replace('.tsx', '');
+    return (
+      file.endsWith('.tsx') &&
+      (fileBasename === componentName || fileBasename.startsWith(`${componentName}-`))
+    );
+  });
+};
+
+const cleanSkillsDir = (): void => {
+  if (existsSync(SKILLS_DIR)) {
+    rmSync(SKILLS_DIR, { recursive: true });
+  }
+  mkdirSync(SKILLS_DIR, { recursive: true });
+};
+
+const processComponent = async (mdxPath: string): Promise<void> => {
+  const componentName = basename(mdxPath, '.mdx');
+  const skillDir = join(SKILLS_DIR, `use-${componentName}-component`);
+  const scriptsDir = join(skillDir, 'scripts');
+
+  const fileContent = await readFile(mdxPath, 'utf-8');
+  const { data } = matter(fileContent);
+
+  const skillContent = transformMdx(fileContent, data.title, data.description);
+  const examples = await findMatchingExamples(componentName);
+
+  mkdirSync(skillDir, { recursive: true });
+  await writeFile(join(skillDir, 'SKILL.md'), skillContent);
+
+  if (examples.length > 0) {
+    mkdirSync(scriptsDir, { recursive: true });
+    for (const example of examples) {
+      await copyFile(join(EXAMPLES_DIR, example), join(scriptsDir, example));
+    }
+  }
+
+  console.log(`Generated: use-${componentName}-component (${examples.length} examples)`);
+};
+
+const main = async (): Promise<void> => {
+  console.log('Generating skills from docs and examples...\n');
+
+  cleanSkillsDir();
+
+  const mdxFiles = await discoverMdxFiles(DOCS_DIR);
+  console.log(`Found ${mdxFiles.length} MDX files\n`);
+
+  for (const mdxPath of mdxFiles) {
+    await processComponent(mdxPath);
+  }
+
+  console.log('\nDone!');
+};
+
+main().catch(console.error);

packages/scripts/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@repo/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}