'use strict';
const KEY_STORE = 'anthropic_api_key';
const MODEL_STORE = 'anthropic_model';
const API_URL = 'https://api.anthropic.com/v1/messages';
const el = (id) => document.getElementById(id);
let SKILLS = [];
let current = null;
let controller = null;
const TIER_META = {
production: { label: 'Production-Ready', cls: 'tier-production', dot: 'π’' },
stable: { label: 'Stable', cls: 'tier-stable', dot: 'π΅' },
experimental: { label: 'Experimental', cls: 'tier-experimental', dot: 'π‘' },
};
// Small "eval-verified" badge for skills scored by the eval harness.
function evalBadgeText(s) {
return s.eval ? `β
${s.eval.score}/5` : '';
}
init();
async function init() {
const savedKey = localStorage.getItem(KEY_STORE);
if (savedKey) el('apiKey').value = savedKey;
const savedModel = localStorage.getItem(MODEL_STORE);
if (savedModel) el('model').value = savedModel;
el('apiKey').addEventListener('input', (e) => localStorage.setItem(KEY_STORE, e.target.value.trim()));
el('model').addEventListener('change', (e) => localStorage.setItem(MODEL_STORE, e.target.value));
el('keyToggle').addEventListener('click', () => {
const f = el('apiKey');
const show = f.type === 'password';
f.type = show ? 'text' : 'password';
el('keyToggle').textContent = show ? 'Hide' : 'Show';
});
el('search').addEventListener('input', renderGallery);
el('pluginFilter').addEventListener('change', renderGallery);
el('tierFilter').addEventListener('change', renderGallery);
el('backBtn').addEventListener('click', showGallery);
el('runBtn').addEventListener('click', run);
el('stopBtn').addEventListener('click', () => controller && controller.abort());
el('copyBtn').addEventListener('click', () => navigator.clipboard.writeText(el('output').dataset.raw || ''));
el('downloadBtn').addEventListener('click', downloadOutput);
// Copy the skill's instructions formatted for another assistant.
el('copyChatgpt').addEventListener('click', () => copyPrompt('chatgpt'));
el('copyGemini').addEventListener('click', () => copyPrompt('gemini'));
el('copyClaude').addEventListener('click', () => copyPrompt('claude'));
// "Which skill do I need?" recommender + shareable links.
el('recommendInput').addEventListener('input', renderRecommendations);
el('shareBtn').addEventListener('click', shareSkill);
try {
const res = await fetch('skills.json');
const data = await res.json();
SKILLS = data.skills;
} catch (e) {
el('gallery').innerHTML = 'Could not load skills.json. Run node web/build-skills.mjs and serve this folder over HTTP.
';
return;
}
const bundles = [...new Set(SKILLS.map((s) => s.plugin))].sort();
const sel = el('pluginFilter');
for (const b of bundles) {
const o = document.createElement('option');
o.value = b;
o.textContent = b;
sel.appendChild(o);
}
renderGallery();
applyShareLink(); // open a skill (and prefill inputs) if the URL points to one
}
// ---------- Recommender: rank skills by a free-text task description ----------
function scoreSkill(s, terms) {
const name = s.name.toLowerCase();
const desc = (s.description || '').toLowerCase();
const hay = (name + ' ' + desc + ' ' + (s.instructions || '')).toLowerCase();
let score = 0;
for (const t of terms) {
if (name.includes(t)) score += 5;
if (desc.includes(t)) score += 3;
else if (hay.includes(t)) score += 1;
}
return score;
}
function renderRecommendations() {
const box = el('recommendResults');
const q = el('recommendInput').value.toLowerCase().trim();
if (q.length < 3) { box.hidden = true; box.innerHTML = ''; return; }
const terms = [...new Set(q.split(/\s+/).filter((t) => t.length > 2))];
const ranked = SKILLS.map((s) => ({ s, score: scoreSkill(s, terms) }))
.filter((x) => x.score > 0)
.sort((a, b) => b.score - a.score || (b.s.eval?.score || 0) - (a.s.eval?.score || 0))
.slice(0, 4);
box.innerHTML = '';
if (!ranked.length) { box.hidden = false; box.innerHTML = 'No close match β try the search below.'; return; }
const lead = document.createElement('span');
lead.className = 'recommend-lead';
lead.textContent = 'Top matches:';
box.appendChild(lead);
for (const { s } of ranked) {
const chip = document.createElement('button');
chip.className = 'recommend-chip';
chip.type = 'button';
chip.textContent = s.title + (s.eval ? ` β
${s.eval.score}/5` : '');
chip.addEventListener('click', () => { el('recommendInput').value = ''; box.hidden = true; selectSkill(s); });
box.appendChild(chip);
}
box.hidden = false;
}
// ---------- Shareable links: ?skill=&i= ----------
function shareSkill() {
if (!current) return;
const fields = [...el('inputForm').querySelectorAll('input, textarea')];
const values = fields.map((f) => f.value);
const url = new URL(location.href.split('?')[0]);
url.searchParams.set('skill', current.name);
if (values.some((v) => v.trim())) {
try {
const packed = btoa(unescape(encodeURIComponent(JSON.stringify(values))));
if (packed.length < 1800) url.searchParams.set('i', packed); // keep links sane
} catch (_) { /* skip inputs if they don't encode */ }
}
const link = url.toString();
navigator.clipboard.writeText(link).then(
() => { el('shareMsg').textContent = 'Link copied β anyone who opens it lands on this skill, prefilled.'; },
() => { el('shareMsg').textContent = link; }
);
}
function applyShareLink() {
const params = new URLSearchParams(location.search);
const name = params.get('skill');
if (!name) return;
const s = SKILLS.find((x) => x.name === name);
if (!s) return;
selectSkill(s);
const packed = params.get('i');
if (packed) {
try {
const values = JSON.parse(decodeURIComponent(escape(atob(packed))));
const fields = [...el('inputForm').querySelectorAll('input, textarea')];
fields.forEach((f, i) => { if (values[i] != null) f.value = values[i]; });
} catch (_) { /* ignore malformed input payloads */ }
}
}
// ---------- Gallery (tiles) ----------
function renderGallery() {
const q = el('search').value.toLowerCase().trim();
const bundle = el('pluginFilter').value;
const tier = el('tierFilter').value;
const gallery = el('gallery');
gallery.innerHTML = '';
const matches = SKILLS.filter((s) => {
if (bundle && s.plugin !== bundle) return false;
if (tier && (s.tier || 'stable') !== tier) return false;
if (!q) return true;
return (s.title + ' ' + s.description + ' ' + s.name).toLowerCase().includes(q);
});
el('count').textContent = `${matches.length} skill${matches.length === 1 ? '' : 's'}`;
if (!matches.length) {
gallery.innerHTML = 'No skills match your search.
';
return;
}
const frag = document.createDocumentFragment();
for (const s of matches) {
const meta = TIER_META[s.tier] || TIER_META.stable;
const card = document.createElement('button');
card.className = 'skill-card';
card.innerHTML =
`
` +
``;
card.querySelector('.card-bundle').textContent = s.plugin;
const evalEl = card.querySelector('.card-eval');
if (s.eval) {
evalEl.textContent = evalBadgeText(s);
evalEl.title = `Eval-scored ${s.eval.score}/5 across ${s.eval.runs} model runs`;
} else {
evalEl.remove();
}
const tierEl = card.querySelector('.card-tier');
tierEl.textContent = `${meta.dot} ${meta.label}`;
tierEl.classList.add(meta.cls);
card.querySelector('.card-title').textContent = s.title;
card.querySelector('.card-summary').textContent = s.summary || s.description;
card.addEventListener('click', () => selectSkill(s));
frag.appendChild(card);
}
gallery.appendChild(frag);
}
function showGallery() {
current = null;
el('runner').hidden = true;
el('gallery').hidden = false;
el('controls').hidden = false;
window.scrollTo({ top: 0 });
}
// ---------- Select & build form ----------
function selectSkill(s) {
current = s;
el('gallery').hidden = true;
el('controls').hidden = true;
el('runner').hidden = false;
el('skillBundle').textContent = s.plugin;
const meta = TIER_META[s.tier] || TIER_META.stable;
const tierTag = el('skillTier');
tierTag.textContent = `${meta.dot} ${meta.label}`;
tierTag.className = 'tier-tag ' + meta.cls;
const evalTag = el('skillEval');
if (s.eval) {
evalTag.textContent = `β
Eval-scored ${s.eval.score}/5`;
evalTag.title = `Scored ${s.eval.score}/5 by an LLM judge across ${s.eval.runs} model runs`;
evalTag.hidden = false;
} else {
evalTag.hidden = true;
}
el('skillTitle').textContent = s.title;
el('skillDesc').textContent = s.description;
el('elsewhere').open = false;
el('copyMsg').textContent = '';
el('shareMsg').textContent = '';
el('outputWrap').hidden = true;
el('output').innerHTML = '';
el('output').hidden = false;
el('compareGrid').hidden = true;
el('compareGrid').innerHTML = '';
setStatus('');
window.scrollTo({ top: 0 });
const form = el('inputForm');
form.innerHTML = '';
if (!s.inputs.length) {
form.appendChild(makeField({ label: 'Your input / context', hint: 'Describe what you need. This skill did not declare structured inputs.', long: true }, 0));
} else {
s.inputs.forEach((inp, i) => form.appendChild(makeField(inp, i)));
}
}
function makeField(inp, i) {
const wrap = document.createElement('div');
wrap.className = 'field';
const id = 'f_' + i;
const opt = inp.optional ? ' (optional)' : '';
const hint = inp.hint ? ` β ${escapeHtml(inp.hint)}` : '';
wrap.innerHTML = ``;
const input = inp.long ? document.createElement('textarea') : document.createElement('input');
input.id = id;
input.dataset.label = inp.label;
input.dataset.optional = inp.optional ? '1' : '';
wrap.appendChild(input);
return wrap;
}
// Stream one completion from the API into a target node. Returns the full text.
async function streamCompletion({ key, model, system, userMessage, node, signal }) {
const res = await fetch(API_URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
'x-api-key': key,
'anthropic-version': '2023-06-01',
'anthropic-dangerous-direct-browser-access': 'true',
},
body: JSON.stringify({
model,
max_tokens: 8192,
stream: true,
...(system ? { system } : {}),
messages: [{ role: 'user', content: userMessage }],
}),
signal,
});
if (!res.ok) throw new Error(parseApiError(await res.text(), res.status));
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
let acc = '';
while (true) {
const { value, done } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
buffer = lines.pop();
for (const line of lines) {
if (!line.startsWith('data:')) continue;
const payload = line.slice(5).trim();
if (!payload || payload === '[DONE]') continue;
let evt;
try { evt = JSON.parse(payload); } catch (_) { continue; }
if (evt.type === 'content_block_delta' && evt.delta && evt.delta.text) {
acc += evt.delta.text;
renderMarkdown(node, acc, true);
} else if (evt.type === 'error') {
throw new Error(evt.error ? evt.error.message : 'Stream error from the API.');
}
}
}
renderMarkdown(node, acc, false);
return acc;
}
const SKILL_SUFFIX =
'\n\n---\nThe user has provided their inputs below. Execute this skill now and produce the complete output. Do not ask follow-up questions β work with what is given and note any reasonable assumptions.';
// ---------- Run ----------
async function run() {
const key = el('apiKey').value.trim();
if (!key) return setStatus('Enter your Claude API key first.', true);
if (!current) return;
const fields = [...el('inputForm').querySelectorAll('input, textarea')];
const missing = fields.filter((f) => !f.dataset.optional && !f.value.trim());
if (missing.length) return setStatus(`Fill in: ${missing.map((f) => f.dataset.label).join(', ')}`, true);
const userMessage = buildUserMessage(fields);
const system = current.instructions + SKILL_SUFFIX;
const model = el('model').value;
const compare = el('compareToggle').checked;
el('outputWrap').hidden = false;
el('runBtn').disabled = true;
el('stopBtn').hidden = false;
controller = new AbortController();
// Single mode β #output. Compare mode β two panes in #compareGrid.
const out = el('output');
const grid = el('compareGrid');
let withNode, plainNode;
if (compare) {
out.hidden = true;
grid.hidden = false;
grid.innerHTML =
'' +
'π Plain prompt (no skill)