refactor(website): SMI-1376 extract shared Skill types, utils, and ca…

packages/website/src/data/categories.ts

@@ -0,0 +1,109 @@
+/**
+ * Static metadata for the skills directory category pages.
+ *
+ * Each entry drives one route under `skills/[id].astro` when the slug
+ * matches a known category (e.g. `/skills/development`). The data includes
+ * the SEO copy (meta description, JSON-LD description) and the human-readable
+ * heading used on the category landing page.
+ *
+ * Previously inlined as a 78-line `CATEGORIES` array at the top of
+ * `skills/[id].astro`; extracted here so it can be imported by both the
+ * page component and any sitemap or static-path generation that needs the
+ * full category list.
+ */
+
+export interface CategoryMeta {
+  slug: string
+  label: string
+  h1: string
+  metaDescription: string
+  description: string
+  jsonLdDescription: string
+}
+
+export interface SkillItem {
+  id: string
+  name: string
+  description: string
+  trust_tier: string
+}
+
+export const CATEGORIES: CategoryMeta[] = [
+  {
+    slug: 'development',
+    label: 'Development',
+    h1: 'Development Agent Skills',
+    metaDescription:
+      'Browse 14,000+ development skills for MCP-compatible agents (Claude Code, Cursor, Copilot, Codex, Windsurf). Code generation, refactoring, PR reviews, and IDE integrations. Free to try.',
+    description:
+      'Skills for software development workflows — code generation, refactoring, PR reviews, and IDE integrations that make your coding agent a better partner.',
+    jsonLdDescription:
+      'Agent skills for software development workflows including code generation, refactoring, and PR reviews.',
+  },
+  {
+    slug: 'integrations',
+    label: 'Integrations',
+    h1: 'Integration Skills — MCP Servers & APIs',
+    metaDescription:
+      'Connect your agent to your tools. Browse MCP server skills, API integrations, and protocol implementations. Free to try.',
+    description:
+      'MCP servers, API integrations, and protocol implementations that connect your agent (Claude Code, Cursor, Copilot, Codex, Windsurf, and others) to your existing tools and services.',
+    jsonLdDescription:
+      'Agent skills for MCP servers, API integrations, and protocol implementations.',
+  },
+  {
+    slug: 'testing',
+    label: 'Testing',
+    h1: 'Testing Agent Skills',
+    metaDescription:
+      'Automate your tests with agent skills. Browse skills for Vitest, Jest, Playwright, and more testing frameworks. Free to try.',
+    description:
+      'Testing frameworks and utilities for unit, integration, and end-to-end test automation across all major testing tools.',
+    jsonLdDescription:
+      'Agent skills for automated testing including unit tests, integration tests, and end-to-end test automation.',
+  },
+  {
+    slug: 'devops',
+    label: 'DevOps',
+    h1: 'DevOps Agent Skills',
+    metaDescription:
+      'Automate your DevOps pipelines. Browse skills for Docker, CI/CD, Kubernetes, and infrastructure tools. Free to try.',
+    description:
+      'CI/CD, Docker, Kubernetes, and infrastructure automation skills for DevOps workflows and deployment pipelines.',
+    jsonLdDescription:
+      'Agent skills for DevOps including CI/CD automation, Docker, Kubernetes, and infrastructure management.',
+  },
+  {
+    slug: 'documentation',
+    label: 'Documentation',
+    h1: 'Documentation Agent Skills',
+    metaDescription:
+      'Generate docs automatically. Browse skills for changelogs, API docs, and README generation. Free to try.',
+    description:
+      'Documentation generation, changelog automation, and API doc skills that keep your docs current with your code.',
+    jsonLdDescription:
+      'Agent skills for documentation generation including changelogs, API docs, and README automation.',
+  },
+  {
+    slug: 'productivity',
+    label: 'Productivity',
+    h1: 'Productivity Agent Skills',
+    metaDescription:
+      'Work smarter with agent skills. Browse skills for workflow automation, task management, and developer productivity. Free to try.',
+    description:
+      'Workflow automation, task management, and productivity skills for developers who want to move faster on every task.',
+    jsonLdDescription:
+      'Agent skills for developer productivity including workflow automation and task management.',
+  },
+  {
+    slug: 'security',
+    label: 'Security',
+    h1: 'Security Agent Skills',
+    metaDescription:
+      'Harden your codebase. Browse agent skills for security scanning, vulnerability detection, and compliance. Free to try.',
+    description:
+      'Security scanning, vulnerability detection, and compliance skills that help you build secure by default.',
+    jsonLdDescription:
+      'Agent skills for security scanning, vulnerability detection, and compliance automation.',
+  },
+]

packages/website/src/env.d.ts

@@ -31,6 +31,10 @@ declare global {
     /** SMI-4895/4896: device-login state — on window so it survives hard navigations. */
     __deviceInited?: boolean;
     __deviceState?: 'input' | 'preview' | 'approved' | 'expired' | 'denied';
+    /** SMI-3663: rate-limit countdown interval on skills search page */
+    _rateLimitInterval?: ReturnType<typeof setInterval>;
+    /** SMI-3664: suppress global rate-limit toast when page handles it inline */
+    hideRateLimitToast?: () => void;
   }
 }
 

packages/website/src/lib/skills-utils.ts

@@ -0,0 +1,38 @@
+/**
+ * Shared UI utilities for the skills directory pages.
+ *
+ * Extracts the five helpers that were previously duplicated across
+ * `skills/index.astro` and `skills/[id].astro` as `is:inline` script blocks:
+ *   - `TRUST_BADGE_CLASSES`  — Tailwind class strings keyed by trust tier
+ *   - `TIER_THRESHOLDS`      — star-count thresholds (re-exported from quality-tiers)
+ *   - `getQualityTier()`     — maps a star count to a tier label and color class (re-exported)
+ *   - `escapeHtml()`         — sanitises untrusted strings before DOM injection
+ *   - `formatNumber()`       — locale-friendly number formatting
+ *
+ * Imported by the bundler-visible `<script>` blocks in the skills pages;
+ * must not import anything that requires a server/Node runtime.
+ */
+
+export { getQualityTier, TIER_THRESHOLDS } from '../utils/quality-tiers.js'
+export type { QualityTier } from '../utils/quality-tiers.js'
+
+import type { Skill } from '../types/skills.js'
+
+export const TRUST_BADGE_CLASSES: Record<Skill['trust_tier'] | 'unknown', string> = {
+  verified: 'bg-green-500/10 text-green-400 border-green-500/20',
+  curated: 'bg-teal-500/10 text-teal-300 border-teal-500/20',
+  community: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+  experimental: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
+  unknown: 'bg-dark-500/10 text-dark-400 border-dark-500/20',
+}
+
+export function escapeHtml(str: string | undefined): string {
+  if (!str) return ''
+  const div = document.createElement('div')
+  div.textContent = str
+  return div.innerHTML
+}
+
+export function formatNumber(num: number): string {
+  return new Intl.NumberFormat().format(num)
+}