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>
112 lines
5.1 KiB
HTML
112 lines
5.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>Skill Playground — Product Notes</title>
|
|
<meta name="description" content="Run any of 170+ professional skills in your browser with your own Claude API key — or copy each one as a ready-made ChatGPT or Gemini prompt." />
|
|
<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>Skill Playground</h1>
|
|
<p class="tagline">170+ professional skills — run with your Claude key, or copy for ChatGPT & Gemini.</p>
|
|
</div>
|
|
</div>
|
|
<div class="key-area">
|
|
<div class="key-field">
|
|
<input id="apiKey" type="password" placeholder="sk-ant-… (your Claude API key)" autocomplete="off" spellcheck="false" />
|
|
<button id="keyToggle" type="button" class="show-toggle">Show</button>
|
|
</div>
|
|
<select id="model" title="Model">
|
|
<option value="claude-opus-4-8">Opus 4.8</option>
|
|
<option value="claude-sonnet-4-6" selected>Sonnet 4.6</option>
|
|
<option value="claude-haiku-4-5-20251001">Haiku 4.5</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="key-note">
|
|
🔒 Your key is stored only in this browser and sent directly to api.anthropic.com — never to us.
|
|
Get one at <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener">console.anthropic.com</a>.
|
|
· 📄 <a href="examples.html">Sample outputs</a> · 📚 <a href="catalog.html">Catalog</a> · 🏆 <a href="leaderboard.html">Leaderboard</a>
|
|
</div>
|
|
|
|
<div class="recommend" id="recommend">
|
|
<input id="recommendInput" type="text" placeholder="🧭 Not sure which skill? Describe your task — e.g. “explain a metric drop to my CEO”" />
|
|
<div id="recommendResults" class="recommend-results" hidden></div>
|
|
</div>
|
|
|
|
<div class="controls" id="controls">
|
|
<input id="search" type="search" placeholder="Search skills…" />
|
|
<select id="pluginFilter"><option value="">All bundles</option></select>
|
|
<select id="tierFilter" title="Maturity tier">
|
|
<option value="">All tiers</option>
|
|
<option value="production">🟢 Production-Ready</option>
|
|
<option value="stable">🔵 Stable</option>
|
|
<option value="experimental">🟡 Experimental</option>
|
|
</select>
|
|
<span id="count" class="count"></span>
|
|
</div>
|
|
|
|
<main class="main">
|
|
<!-- Tile gallery -->
|
|
<section id="gallery" class="gallery"></section>
|
|
|
|
<!-- Single-skill runner -->
|
|
<section id="runner" class="runner" hidden>
|
|
<button id="backBtn" class="back" type="button">← All skills</button>
|
|
|
|
<div class="skill-head">
|
|
<span class="bundle-tag" id="skillBundle"></span>
|
|
<span class="tier-tag" id="skillTier"></span>
|
|
<span class="eval-badge" id="skillEval" hidden></span>
|
|
<h2 id="skillTitle"></h2>
|
|
<p id="skillDesc" class="skill-desc"></p>
|
|
<button id="shareBtn" class="ghost share-btn" type="button" title="Copy a link that opens this skill with these inputs">🔗 Share</button>
|
|
<span id="shareMsg" class="copy-msg"></span>
|
|
</div>
|
|
|
|
<details class="elsewhere" id="elsewhere">
|
|
<summary>Use this skill in another tool ↗</summary>
|
|
<p class="elsewhere-note">These skills aren't locked to Claude. Copy the ready-made instructions into another assistant — you keep the full framework, you just paste it once.</p>
|
|
<div class="elsewhere-actions">
|
|
<button id="copyChatgpt" class="ghost" type="button">Copy for ChatGPT</button>
|
|
<button id="copyGemini" class="ghost" type="button">Copy for Gemini</button>
|
|
<button id="copyClaude" class="ghost" type="button">Copy raw instructions</button>
|
|
<span id="copyMsg" class="copy-msg"></span>
|
|
</div>
|
|
</details>
|
|
|
|
<form id="inputForm" class="input-form"></form>
|
|
|
|
<div class="actions">
|
|
<button id="runBtn" class="primary" type="button">Run with my Claude key</button>
|
|
<button id="stopBtn" class="ghost" type="button" hidden>Stop</button>
|
|
<label class="compare-toggle" title="Run the same inputs with and without the skill, side by side"><input type="checkbox" id="compareToggle" /> ⚖️ Compare vs. plain prompt</label>
|
|
<span id="status" class="status"></span>
|
|
</div>
|
|
|
|
<div class="output-wrap" id="outputWrap" hidden>
|
|
<div class="output-toolbar">
|
|
<span>Output</span>
|
|
<div>
|
|
<button id="copyBtn" class="ghost" type="button">Copy</button>
|
|
<button id="downloadBtn" class="ghost" type="button">Download .md</button>
|
|
</div>
|
|
</div>
|
|
<article id="output" class="output markdown"></article>
|
|
<div id="compareGrid" class="compare-grid" hidden></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|