feat: refine home skill cards

Author: steipete

src/components/SkillCard.tsx

@@ -0,0 +1,21 @@
+import { Link } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import type { Doc } from '../../convex/_generated/dataModel'
+
+type SkillCardProps = {
+  skill: Doc<'skills'>
+  badge?: string
+  summaryFallback: string
+  meta: ReactNode
+}
+
+export function SkillCard({ skill, badge, summaryFallback, meta }: SkillCardProps) {
+  return (
+    <Link to="/skills/$slug" params={{ slug: skill.slug }} className="card skill-card">
+      {badge ? <div className="tag">{badge}</div> : null}
+      <h3 className="skill-card-title">{skill.displayName}</h3>
+      <p className="skill-card-summary">{skill.summary ?? summaryFallback}</p>
+      <div className="skill-card-footer">{meta}</div>
+    </Link>
+  )
+}

src/routes/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from 'convex/react'
 import { api } from '../../convex/_generated/api'
 import type { Doc } from '../../convex/_generated/dataModel'
+import { SkillCard } from '../components/SkillCard'
 
 export const Route = createFileRoute('/')({
   component: Home,
@@ -44,8 +45,10 @@ function Home() {
                 Search
               </Link>
             </div>
-            <div style={{ display: 'grid', gap: 12, marginTop: 18 }}>
+            <div className="hero-install" style={{ marginTop: 18 }}>
               <div className="stat">Search skills. Versioned, rollback-ready.</div>
+              <div className="stat">Install any skill folder in one shot:</div>
+              <div className="hero-install-code mono">npx clawdhub@latest install sonoscli</div>
             </div>
           </div>
         </div>
@@ -59,23 +62,17 @@ function Home() {
             <div className="card">No highlighted skills yet.</div>
           ) : (
             highlighted.map((skill) => (
-              <Link
+              <SkillCard
                 key={skill._id}
-                to="/skills/$slug"
-                params={{ slug: skill.slug }}
-                className="card"
-              >
-                <div className="tag">Highlighted</div>
-                <h3 className="section-title" style={{ fontSize: '1.2rem', margin: 0 }}>
-                  {skill.displayName}
-                </h3>
-                <p className="section-subtitle" style={{ margin: 0 }}>
-                  {skill.summary ?? 'A fresh skill bundle.'}
-                </p>
-                <div className="stat">
-                  ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads}
-                </div>
-              </Link>
+                skill={skill}
+                badge="Highlighted"
+                summaryFallback="A fresh skill bundle."
+                meta={
+                  <div className="stat">
+                    ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads}
+                  </div>
+                }
+              />
             ))
           )}
         </div>
@@ -89,20 +86,16 @@ function Home() {
             <div className="card">No skills yet. Be the first.</div>
           ) : (
             latest.map((skill) => (
-              <Link
+              <SkillCard
                 key={skill._id}
-                to="/skills/$slug"
-                params={{ slug: skill.slug }}
-                className="card"
-              >
-                <div className="stat">{skill.summary ?? 'Agent-ready skill pack.'}</div>
-                <h3 className="section-title" style={{ fontSize: '1.2rem', margin: 0 }}>
-                  {skill.displayName}
-                </h3>
-                <div className="stat">
-                  {skill.stats.versions} versions · {skill.stats.downloads} downloads
-                </div>
-              </Link>
+                skill={skill}
+                summaryFallback="Agent-ready skill pack."
+                meta={
+                  <div className="stat">
+                    {skill.stats.versions} versions · {skill.stats.downloads} downloads
+                  </div>
+                }
+              />
             ))
           )}
         </div>

src/styles.css

@@ -622,6 +622,55 @@ code {
     box-shadow 0.2s ease;
 }
 
+.skill-card {
+  min-height: 176px;
+}
+
+.skill-card-title {
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  letter-spacing: -0.02em;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.skill-card-summary {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.skill-card-footer {
+  margin-top: auto;
+}
+
+.hero-install {
+  display: grid;
+  gap: 10px;
+}
+
+.hero-install-code {
+  border: 1px solid rgba(255, 107, 74, 0.2);
+  background: rgba(255, 107, 74, 0.08);
+  border-radius: 14px;
+  padding: 10px 12px;
+  font-size: 0.95rem;
+  color: var(--ink);
+}
+
+[data-theme="dark"] .hero-install-code {
+  border-color: rgba(232, 106, 71, 0.32);
+  background: rgba(232, 106, 71, 0.14);
+}
+
 .tag {
   display: inline-flex;
   align-items: center;