feat: workflow recipes, eval badges, one-click MCP, playground upgrades, sample gallery, skill-of-the-week

Signature features that turn breadth (174 skills) into a differentiated product: - Workflow recipes: 5 cross-profession chains (workflows.json) that pass each output forward — slash commands (/ship-a-feature etc.), WORKFLOWS.md generated by scripts/build-workflows.mjs, README + MCP (list_workflows/get_workflow) wired - Eval-backed quality: real per-skill scores from evals/results.json surfaced as badges in the playground and an honest README section (6 scored skills) - One-click MCP: 'claude mcp add' install + workflow tools, works in any MCP client - Playground: 'which skill?' recommender, with/without compare toggle, shareable ?skill= deep-links with prefilled inputs - Sample-output gallery: hand-written examples for the hero five + generator (scripts/build-samples.mjs) + web/examples.html - Skill-of-the-week: scheduled workflow + script that composes X/LinkedIn posts and posts to an optional webhook Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-19 09:56:11 +01:00
parent 7f06f0a993
commit 54f76456ab
30 changed files with 1168 additions and 67 deletions
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sample Outputs — see what the skills produce</title>
+  <meta name="description" content="Real example outputs from the professional skill library — see exactly what each skill produces before you run it." />
+  <link rel="stylesheet" href="styles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.9/dist/purify.min.js"></script>
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <img src="assets/product-notes.jpg" alt="Product Notes" class="brand-logo" />
+      <div class="brand-text">
+        <h1>Sample Outputs</h1>
+        <p class="tagline">See exactly what each skill produces — before you run anything.</p>
+      </div>
+    </div>
+  </header>
+
+  <div class="key-note">
+    📄 These are real outputs from the skills. Like one? <a href="index.html">Run it yourself in the Playground →</a>
+    · 📚 <a href="catalog.html">Catalog</a> · 🏆 <a href="leaderboard.html">Leaderboard</a>
+  </div>
+
+  <main class="main">
+    <div class="recommend" style="margin-bottom:18px">
+      <input id="filter" type="search" placeholder="Filter samples…" />
+    </div>
+    <section id="samples"></section>
+  </main>
+
+  <script>
+    const elx = (id) => document.getElementById(id);
+    let SAMPLES = [];
+
+    async function init() {
+      try {
+        SAMPLES = (await (await fetch('samples.json')).json()).samples;
+      } catch (e) {
+        elx('samples').innerHTML = '<p class="empty-msg">Could not load samples.json. Run <code>node scripts/build-samples.mjs</code>.</p>';
+        return;
+      }
+      elx('filter').addEventListener('input', render);
+      render();
+    }
+
+    function render() {
+      const q = elx('filter').value.toLowerCase().trim();
+      const box = elx('samples');
+      box.innerHTML = '';
+      const list = SAMPLES.filter((s) => !q || (s.title + ' ' + s.skill + ' ' + s.input).toLowerCase().includes(q));
+      if (!list.length) { box.innerHTML = '<p class="empty-msg">No samples match.</p>'; return; }
+      for (const s of list) {
+        const card = document.createElement('details');
+        card.className = 'sample-card';
+        card.open = list.length <= 2;
+        const note = s.source ? `<span class="sample-source">${s.source}</span>` : '';
+        card.innerHTML =
+          `<summary><span class="sample-title">${s.title}</span> ${note}` +
+          `<a class="sample-run" href="index.html?skill=${encodeURIComponent(s.skill)}" onclick="event.stopPropagation()">Run this →</a></summary>` +
+          `<p class="sample-input"><strong>Input:</strong> ${escapeHtml(s.input)}</p>` +
+          `<div class="output markdown sample-output"></div>`;
+        card.querySelector('.sample-output').innerHTML = DOMPurify.sanitize(marked.parse(s.output));
+        box.appendChild(card);
+      }
+    }
+
+    function escapeHtml(s) {
+      return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+    }
+
+    init();
+  </script>
+</body>
+</html>