Mohit
54f76456ab
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>
79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<!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) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|