From 1a98a818e4049d961ad998da8835c7b55bebd150 Mon Sep 17 00:00:00 2001 From: hytonylee Date: Thu, 4 Jun 2026 17:04:33 -0700 Subject: [PATCH] refactor(website): SMI-1376 extract shared Skill types, utils, and categories Add src/types/skills.ts (wire-format Skill, AlsoInstalled, SearchState), src/lib/skills-utils.ts (TRUST_BADGE_CLASSES, escapeHtml, formatNumber; re-exports getQualityTier/TIER_THRESHOLDS from quality-tiers), and src/data/categories.ts (CategoryMeta, SkillItem, CATEGORIES array lifted from [id].astro frontmatter). Extends env.d.ts with _rateLimitInterval and hideRateLimitToast window declarations. Co-Authored-By: Claude Sonnet 4.6 --- packages/website/src/data/categories.ts | 109 +++++ packages/website/src/env.d.ts | 4 + packages/website/src/lib/skills-utils.ts | 38 ++ packages/website/src/pages/skills/[id].astro | 452 +----------------- packages/website/src/pages/skills/index.astro | 83 ++-- packages/website/src/types/skills.ts | 48 ++ 6 files changed, 230 insertions(+), 504 deletions(-) create mode 100644 packages/website/src/data/categories.ts create mode 100644 packages/website/src/lib/skills-utils.ts create mode 100644 packages/website/src/types/skills.ts diff --git a/packages/website/src/data/categories.ts b/packages/website/src/data/categories.ts new file mode 100644 index 000000000..8137adc69 --- /dev/null +++ b/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.', + }, +] diff --git a/packages/website/src/env.d.ts b/packages/website/src/env.d.ts index 5b8a6b89b..1382488d4 100644 --- a/packages/website/src/env.d.ts +++ b/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; + /** SMI-3664: suppress global rate-limit toast when page handles it inline */ + hideRateLimitToast?: () => void; } } diff --git a/packages/website/src/lib/skills-utils.ts b/packages/website/src/lib/skills-utils.ts new file mode 100644 index 000000000..8c8c3a494 --- /dev/null +++ b/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 ` diff --git a/packages/website/src/pages/skills/index.astro b/packages/website/src/pages/skills/index.astro index cda52020a..c66ade9ee 100644 --- a/packages/website/src/pages/skills/index.astro +++ b/packages/website/src/pages/skills/index.astro @@ -37,6 +37,7 @@ const isCrawler = isCrawlerUserAgent(userAgent) --- +