From c7a5280c8417e008a7c8a98e457e45fd4948c82b Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Wed, 1 Apr 2026 02:40:37 +0200
Subject: [PATCH] feat(10-03): update DesignGuide SkillCard section with all 5
 required variants

- Expand grid to lg:grid-cols-3 for 5-card layout
- Add Loading (updating) variant (5th card per UI-SPEC requirement)
- Add onRollback/onUninstall props to installed variants
- Add descriptive comments for each variant state
---
 ui/src/pages/DesignGuide.tsx | 39 +++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/DesignGuide.tsx b/ui/src/pages/DesignGuide.tsx
index 12e684c0..516ccf01 100644
--- a/ui/src/pages/DesignGuide.tsx
+++ b/ui/src/pages/DesignGuide.tsx
@@ -1260,7 +1260,8 @@ export function DesignGuide() {
       {/* ============================================================ */}
       <Section title="Skill Card">
         <SubSection title="Variants">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {/* Default (uninstalled) */}
             <SkillCard
               skill={{
                 id: "anthropic/code-review",
@@ -1275,6 +1276,7 @@ export function DesignGuide() {
               }}
               onInstall={() => {}}
             />
+            {/* Installed (no update) */}
             <SkillCard
               skill={{
                 id: "anthropic/planning",
@@ -1288,7 +1290,10 @@ export function DesignGuide() {
                 ratingCount: null,
               }}
               isInstalled
+              onRollback={() => {}}
+              onUninstall={() => {}}
             />
+            {/* Installed + update available */}
             <SkillCard
               skill={{
                 id: "community/docs-writer",
@@ -1305,22 +1310,42 @@ export function DesignGuide() {
               hasUpdate
               onUpdate={() => {}}
               onRollback={() => {}}
+              onUninstall={() => {}}
             />
+            {/* Loading (installing) */}
             <SkillCard
               skill={{
-                id: "anthropic/code-review",
-                name: "Code Review",
-                description: "Automated code review with style, security, and correctness checks.",
-                sourceId: "anthropic",
+                id: "anthropic-official/bash",
+                name: "Bash Scripting",
+                description: "Advanced bash scripting patterns for automation, file manipulation, and system administration tasks.",
+                sourceId: "anthropic-official",
                 category: "engineering",
                 activeVersionId: null,
                 removedAt: null,
-                averageRating: 4.7,
-                ratingCount: 42,
+                averageRating: 4.2,
+                ratingCount: 38,
               }}
               onInstall={() => {}}
               isLoading
             />
+            {/* Loading (updating) */}
+            <SkillCard
+              skill={{
+                id: "community/react-patterns",
+                name: "React Patterns",
+                description: "Common React patterns and best practices for component design.",
+                sourceId: "community",
+                category: "frontend",
+                activeVersionId: "anthropic-official/bash@abc123",
+                removedAt: null,
+                averageRating: null,
+                ratingCount: null,
+              }}
+              isInstalled
+              hasUpdate
+              onUpdate={() => {}}
+              isLoading
+            />
           </div>
         </SubSection>
       </Section>