Polish homepage diagram spacing and skill file tree

web/app/page.tsx

@@ -95,12 +95,6 @@ export default async function Home() {
 
       <section className="px-6 pb-6" aria-labelledby="agent-flow-heading">
         <div className="mx-auto max-w-6xl">
-          <h2
-            id="agent-flow-heading"
-            className="font-display text-3xl text-gray-900 dark:text-white md:text-4xl"
-          >
-            How AI Agents use AgentVouch
-          </h2>
           <AgentVouchDiagram />
         </div>
       </section>

web/components/AgentVouchDiagram.module.css

@@ -3,9 +3,7 @@
   --surface: var(--color-white);
   --muted: var(--color-gray-500);
   --return: var(--color-emerald-600);
-  margin-top: 28px;
-  padding: 28px;
-  border: 1px solid var(--edge);
+  padding: 0 0 8px;
   border-radius: 16px;
   background: var(--color-gray-50);
   color: var(--foreground);
@@ -21,8 +19,9 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
+  align-items: baseline;
+  gap: 12px 24px;
+  font-size: 16px;
   color: var(--muted);
 }
 .status {
@@ -33,7 +32,7 @@
   display: grid;
   grid-template-columns: 1fr 48px 1.15fr 48px 1fr;
   align-items: center;
-  padding: 44px 0 28px;
+  padding: 24px 28px 8px;
 }
 .card {
   min-width: 0;
@@ -172,6 +171,8 @@
 .skill {
   position: relative;
   display: grid;
+  align-content: start;
+  min-height: 180px;
   gap: 8px;
   padding: 16px;
   background: var(--surface);
@@ -180,11 +181,46 @@
   font-size: 12px;
   transition: border-color 125ms;
 }
+.fileTree {
+  margin: 0 0 0 6px;
+  padding: 0;
+  list-style: none;
+}
+.fileTree li {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0 5px 22px;
+}
+.fileTree li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid var(--edge);
+}
+.fileTree li:last-child::before {
+  bottom: 50%;
+}
+.fileTree li::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 14px;
+  border-top: 1px solid var(--edge);
+}
+.fileTree svg {
+  flex-shrink: 0;
+  color: var(--muted);
+}
 .skillTitle {
   display: flex;
   gap: 8px;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 0;
   color: var(--lobster-accent);
 }
 @keyframes outbound {
@@ -221,11 +257,11 @@
 }
 @media (max-width: 767px) {
   .scene {
-    padding: 20px;
+    padding: 0 0 8px;
   }
   .flow {
     grid-template-columns: 1fr;
-    padding-top: 28px;
+    padding: 16px 12px 8px;
   }
   .card {
     padding: 22px;
@@ -255,9 +291,10 @@
     animation-name: up;
   }
   .caption {
-    font-size: 12px;
+    font-size: 14px;
   }
   .status {
+    margin-left: 0;
     min-height: 36px;
   }
   @keyframes down {
@@ -363,6 +400,5 @@
   animation: logoIn 240ms ease-out;
 }
 .skillTitle {
-  min-height: 3lh;
   animation: logoIn 240ms ease-out;
 }

web/components/AgentVouchDiagram.tsx

@@ -13,6 +13,7 @@ import {
   FiShield,
   FiUsers,
   FiFileText,
+  FiFolder,
 } from "react-icons/fi";
 import { IoGameControllerOutline } from "react-icons/io5";
 import agentvouchLogo from "@/app/agentvouch_logo.svg";
@@ -80,6 +81,12 @@ export function AgentVouchDiagram() {
   return (
     <div className={styles.scene} data-phase={reduced ? "static" : phase}>
       <div className={styles.caption}>
+        <h2
+          id="agent-flow-heading"
+          className="font-display text-3xl text-gray-900 dark:text-white md:text-4xl"
+        >
+          How AI Agents use AgentVouch
+        </h2>
         <span className={styles.status}>
           {reduced ? "Find · Review · Get" : `0${phase + 1} / ${steps[phase]}`}
         </span>
@@ -150,7 +157,7 @@ export function AgentVouchDiagram() {
           <p className={styles.eyebrow}>Reputation + discovery</p>
           <h3>AgentVouch</h3>
           <p>
-            Find skills for your workflow. Review their security scans and
+            Find skills for your workflows. Review their security scans and
             author reputation.
           </p>
           <div className={styles.signals}>
@@ -188,9 +195,20 @@ export function AgentVouchDiagram() {
                 <WorkflowIcon aria-hidden="true" />
                 <span>{workflow.name} Workflow</span>
               </div>
-              <span>skill.md</span>
-              <span>scripts/</span>
-              <span>templates/</span>
+              <ul className={styles.fileTree} aria-label="Skill package files">
+                <li>
+                  <FiFileText aria-hidden="true" />
+                  <span>SKILL.md</span>
+                </li>
+                <li>
+                  <FiFolder aria-hidden="true" />
+                  <span>scripts/</span>
+                </li>
+                <li>
+                  <FiFolder aria-hidden="true" />
+                  <span>templates/</span>
+                </li>
+              </ul>
             </div>
           </div>
         </article>