[docs] Skills Marketplace UI Improvements (#7158)

documentation/src/components/skill-card.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Link from "@docusaurus/Link";
-import { Check } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import type { Skill } from "@site/src/pages/skills/types";
 
 function generateInstallCommand(repoUrl: string, skillId: string): string {
@@ -54,10 +54,10 @@ export function SkillCard({ skill }: { skill: Skill }) {
               {skill.description}
             </p>
 
-            {/* Tags */}
+            {/* Tags - show max 4 on card, rest visible on detail page */}
             {skill.tags.length > 0 && (
               <div className="flex flex-wrap gap-2">
-                {skill.tags.map((tag, index) => (
+                {skill.tags.slice(0, 4).map((tag, index) => (
                   <span
                     key={index}
                     className="inline-flex items-center h-7 px-3 rounded-full border border-zinc-300 bg-zinc-100 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 text-xs font-medium"
@@ -87,46 +87,37 @@ export function SkillCard({ skill }: { skill: Skill }) {
           </div>
 
           {/* Footer with actions */}
-          <div className="flex justify-between items-center pt-6 mt-2 border-t border-zinc-100 dark:border-zinc-800">
+          <div className="flex flex-col gap-3 pt-6 mt-2 border-t border-zinc-100 dark:border-zinc-800">
-            {/* Install button */}
+            {/* Install command display */}
-            <div className="relative group">
+            <div
-              <button
+              onClick={handleCopyInstall}
-                onClick={handleCopyInstall}
+              className="flex items-center gap-2 -mx-2 px-2 py-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
-                className={`text-sm font-medium px-3 py-1 rounded cursor-pointer flex items-center gap-1.5 transition-colors ${
+            >
-                  copied
+              <code className="flex-1 text-xs font-mono text-zinc-600 dark:text-zinc-400 truncate">
-                    ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+                <span className="text-zinc-400 dark:text-zinc-500">$</span> {generateInstallCommand(skill.repoUrl, skill.id)}
-                    : "text-zinc-700 bg-zinc-200 dark:bg-zinc-700 dark:text-white dark:hover:bg-zinc-600 hover:bg-zinc-300"
+              </code>
-                }`}
+              <span className="flex-shrink-0 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
-              >
                 {copied ? (
-                  <>
+                  <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
-                    <Check className="h-3.5 w-3.5" />
-                    Copied!
-                  </>
                 ) : (
-                  "Copy Install"
+                  <Copy className="h-4 w-4" />
                 )}
-              </button>
+              </span>
-
             </div>
 
-            {/* View Source link - always show, links to Agent-Skills repo */}
+            {/* View Details and Author */}
-            <a
+            <div className="flex justify-between items-center">
-              href={skill.viewSourceUrl}
+              <span className="text-sm font-medium text-purple-600 dark:text-purple-400">
-              target="_blank"
+                View Details →
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-purple-600 hover:underline dark:text-purple-400"
-              onClick={(e) => e.stopPropagation()}
-            >
-              View Source →
-            </a>
-
-            {/* Author */}
-            {skill.author && (
-              <span className="text-sm text-zinc-500 dark:text-zinc-400">
-                by {skill.author}
               </span>
-            )}
+
+              {/* Author */}
+              {skill.author && (
+                <span className="text-sm text-zinc-500 dark:text-zinc-400">
+                  by {skill.author}
+                </span>
+              )}
+            </div>
           </div>
         </div>
       </Link>

documentation/src/components/ui/sidebar-filter.tsx

@@ -9,6 +9,7 @@ export type SidebarFilterOption = {
 export type SidebarFilterGroup = {
   title: string;
   options: SidebarFilterOption[];
+  maxHeight?: string;
 };
 
 interface SidebarFilterProps {
@@ -33,33 +34,49 @@ export function SidebarFilter({ groups, selectedValues, onChange }: SidebarFilte
           <h3 className="text-lg font-medium mb-4 text-textProminent">
             {group.title}
           </h3>
-          <div className="space-y-2">
+          <div className="relative">
-            {group.options.map((option) => (
+            <div 
-              <label
+              className={cn(
-                key={option.value}
+                "space-y-2",
-                className="flex items-center justify-between group cursor-pointer"
+                group.maxHeight,
-              >
+                group.maxHeight && "scrollbar-visible"
-                <div className="flex items-center">
+              )}
-                  <input
+            >
-                    type="checkbox"
+              {group.options.map((option) => (
-                    checked={(selectedValues[group.title] || []).includes(option.value)}
+                <label
-                    onChange={() => toggleValue(group.title, option.value)}
+                  key={option.value}
-                    className="form-checkbox h-4 w-4 text-purple-600 transition duration-150 ease-in-out"
+                  className="flex items-center justify-between group cursor-pointer"
-                  />
+                >
-                  <span className="ml-2 text-sm text-textStandard group-hover:text-textProminent">
+                  <div className="flex items-center">
-                    {option.label}
+                    <input
-                  </span>
+                      type="checkbox"
-                </div>
+                      checked={(selectedValues[group.title] || []).includes(option.value)}
-                {option.count !== undefined && (
+                      onChange={() => toggleValue(group.title, option.value)}
-                  <span className="text-sm text-textSubtle">
+                      className="form-checkbox h-4 w-4 text-purple-600 transition duration-150 ease-in-out"
-                    {option.count}
+                    />
-                  </span>
+                    <span className="ml-2 text-sm text-textStandard group-hover:text-textProminent">
-                )}
+                      {option.label}
-              </label>
+                    </span>
-            ))}
+                  </div>
+                  {option.count !== undefined && (
+                    <span className="text-sm text-textSubtle">
+                      {option.count}
+                    </span>
+                  )}
+                </label>
+              ))}
+            </div>
+            {group.maxHeight && (
+              <div 
+                className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none"
+                style={{
+                  background: 'linear-gradient(to top, var(--ifm-background-color, #ffffff) 0%, transparent 100%)'
+                }}
+              />
+            )}
           </div>
         </div>
       ))}
     </div>
   );
-}
+}

documentation/src/css/custom.css

@@ -463,3 +463,33 @@ main {
   max-width: 100%;
   overflow-x: hidden;
 }
+
+/* Custom scrollbar for filter sections */
+.scrollbar-visible {
+  overflow-y: auto;
+}
+
+.scrollbar-visible::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb {
+  background-color: var(--grey-80);
+  border-radius: 3px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background-color: var(--grey-60);
+}
+
+[data-theme="dark"] .scrollbar-visible::-webkit-scrollbar-thumb {
+  background-color: var(--dark-grey-45);
+}
+
+[data-theme="dark"] .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dark-grey-60);
+}

documentation/src/pages/skills/index.tsx

@@ -36,13 +36,14 @@ export default function SkillsPage() {
   ];
 
   const sidebarFilterGroups: SidebarFilterGroup[] = [
-    {
-      title: "Tags",
-      options: uniqueTags
-    },
     {
       title: "Source",
       options: sourceOptions
+    },
+    {
+      title: "Tags",
+      options: uniqueTags,
+      maxHeight: "max-h-64 overflow-y-auto"
     }
   ];