Merge pull request #15 from ibelick/feat/add-more-skills

Feat/add more skills

src/data/registry.ts

@@ -242,6 +242,97 @@ const registrySource: RegistrySourceSkill[] = [
     description:
       "Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.",
   },
+  {
+    slug: "frontend-ui-engineering",
+    user: "addyosmani",
+    repo: "agent-skills",
+    rawUrl:
+      "https://raw.githubusercontent.com/addyosmani/agent-skills/main/skills/frontend-ui-engineering/SKILL.md",
+    githubUrl:
+      "https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md",
+    name: "frontend-ui-engineering",
+    topics: ["frontend", "systems", "accessibility"],
+    description:
+      "Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.",
+  },
+  {
+    slug: "react-best-practices",
+    user: "vercel-labs",
+    repo: "agent-skills",
+    rawUrl:
+      "https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/SKILL.md",
+    githubUrl:
+      "https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md",
+    name: "vercel-react-best-practices",
+    topics: ["frontend", "performance", "systems"],
+    description:
+      "Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.",
+  },
+  {
+    slug: "react-router-framework-mode",
+    user: "remix-run",
+    repo: "agent-skills",
+    rawUrl:
+      "https://raw.githubusercontent.com/remix-run/agent-skills/main/skills/react-router-framework-mode/SKILL.md",
+    githubUrl:
+      "https://github.com/remix-run/agent-skills/blob/main/skills/react-router-framework-mode/SKILL.md",
+    name: "react-router-framework-mode",
+    topics: ["frontend", "architecture", "interaction"],
+    description:
+      "React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.",
+  },
+  {
+    slug: "svelte-code-writer",
+    user: "sveltejs",
+    repo: "ai-tools",
+    rawUrl:
+      "https://raw.githubusercontent.com/sveltejs/ai-tools/main/plugins/claude/svelte/skills/svelte-code-writer/SKILL.md",
+    githubUrl:
+      "https://github.com/sveltejs/ai-tools/blob/main/plugins/claude/svelte/skills/svelte-code-writer/SKILL.md",
+    name: "svelte-code-writer",
+    topics: ["frameworks", "frontend", "tooling"],
+    description:
+      "Official Svelte code-writing skill focused on modern Svelte patterns, component composition, and production-ready implementations.",
+  },
+  {
+    slug: "playwright-cli",
+    user: "microsoft",
+    repo: "playwright-cli",
+    rawUrl:
+      "https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli/SKILL.md",
+    githubUrl:
+      "https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md",
+    name: "playwright-cli",
+    topics: ["testing", "tooling", "frontend"],
+    description:
+      "Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.",
+  },
+  {
+    slug: "web-quality-audit",
+    user: "addyosmani",
+    repo: "web-quality-skills",
+    rawUrl:
+      "https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/web-quality-audit/SKILL.md",
+    githubUrl:
+      "https://github.com/addyosmani/web-quality-skills/blob/main/skills/web-quality-audit/SKILL.md",
+    name: "web-quality-audit",
+    topics: ["performance", "accessibility", "testing"],
+    description:
+      "Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.",
+  },
+  {
+    slug: "swiss-design",
+    user: "zeke",
+    repo: "swiss-design-skill",
+    rawUrl:
+      "https://raw.githubusercontent.com/zeke/swiss-design-skill/main/swiss-design/SKILL.md",
+    githubUrl:
+      "https://github.com/zeke/swiss-design-skill/blob/main/swiss-design/SKILL.md",
+    name: "swiss-design",
+    topics: ["visual", "typography", "systems"],
+    description:
+      "Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.",
+  },
   {
     slug: "react-native-best-practices",
     user: "callstackincubator",

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import "../styles/global.css";
+import firaMono400Woff2 from "@fontsource/fira-mono/files/fira-mono-latin-400-normal.woff2?url";
 import Button from "../ui/button.astro";
 import { getGithubStars } from "../lib/github-stars";
 import { skills } from "../data/skills";
@@ -92,6 +93,13 @@ const commandItems = skills.map((skill) => ({
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
+    <link
+      rel="preload"
+      href={firaMono400Woff2}
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <link rel="canonical" href={canonicalUrl.href} />

src/pages/skills/index.astro

@@ -90,7 +90,7 @@ const structuredData = {
                   <TopicTag href={topic.href} label={topic.label} />
                 ))
               }
-              <TopicTag href="/skills/topics" label="More" />
+              <TopicTag href="/skills/topics" label="More +" />
             </div>
           </div>
         </div>

src/ui/command-dialog.tsx

@@ -345,7 +345,7 @@ export function CommandDialog({ items }: CommandDialogProps) {
               onChange={onInputChange}
               onKeyDown={onInputKeyDown}
               placeholder="Search skills..."
-              className="text-parchment-900 placeholder:text-parchment-400 w-full bg-transparent text-[15px] outline-none"
+              className="text-parchment-900 placeholder:text-parchment-400 w-full bg-transparent text-base outline-none sm:text-[15px]"
               role="combobox"
               aria-expanded={open}
               aria-controls="skills-search-results"

src/ui/topic-tag.astro

@@ -10,7 +10,7 @@ const { href, label, count } = Astro.props;
 
 <a
   href={href}
-  class="text-parchment-700 hover:border-parchment-300 hover:bg-parchment-100 inline-flex items-center gap-1.5 rounded-full border border-neutral-300 bg-transparent px-3.5 py-1.5 text-xs font-medium tracking-normal transition-colors"
+  class="text-parchment-700 hover:bg-parchment-100 inline-flex h-8 items-center gap-1.5 rounded-lg border border-neutral-200 bg-transparent px-2.5 text-sm font-medium tracking-normal transition-colors"
 >
   <span>{label}</span>
   {