docs: add screenshots to README and landing page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yibie

README.md

@@ -6,6 +6,16 @@ A native macOS app to manage skills across all your coding agents — Claude Cod
 
 ---
 
+## Screenshots
+
+![Discover & Sandbox](docs/screenshots/discover.png)
+*Discover marketplace plugins and test them in the built-in sandbox*
+
+![Starred Skills](docs/screenshots/starred.png)
+*Manage your library — filter by agent, source, or starred*
+
+---
+
 ## What it does
 
 Coding agent skills are scattered everywhere. Each agent has its own format, install path, and management story. Skills Manager brings them together in one place.

docs/index.html

@@ -204,9 +204,35 @@
     footer a { color: var(--muted); text-decoration: none; }
     footer a:hover { color: var(--text); }
 
+    /* Screenshots */
+    .screenshots {
+      max-width: 1040px;
+      margin: 0 auto;
+      padding: 0 24px 80px;
+    }
+    .screenshot-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+    .screenshot-grid img {
+      width: 100%;
+      border-radius: 12px;
+      border: 1px solid var(--border);
+      box-shadow: 0 12px 48px rgba(0,0,0,0.5);
+      display: block;
+    }
+    .screenshot-caption {
+      font-size: 12px;
+      color: var(--muted);
+      text-align: center;
+      margin-top: 8px;
+    }
+
     @media (max-width: 600px) {
       nav { padding: 16px 20px; }
       .nav-links { gap: 16px; }
+      .screenshot-grid { grid-template-columns: 1fr; }
     }
   </style>
 </head>
@@ -248,6 +274,19 @@ <h1>One place for all your agent skills</h1>
   </div>
 </div>
 
+<section class="screenshots">
+  <div class="screenshot-grid">
+    <div>
+      <img src="screenshots/discover.png" alt="Discover & Sandbox">
+      <p class="screenshot-caption">Discover marketplace plugins and test in the built-in sandbox</p>
+    </div>
+    <div>
+      <img src="screenshots/starred.png" alt="Starred Skills">
+      <p class="screenshot-caption">Manage your library — filter by agent, source, or starred</p>
+    </div>
+  </div>
+</section>
+
 <section class="features">
   <p class="section-label">Features</p>
   <h2 class="section-title">Everything you need to manage skills</h2>