Files
pm-claude-skills/web/build-skills.mjs
T
Mohit 2e58766814 feat(web): add Skill Playground — browser UI to run any skill with your own key
A zero-backend static web app to run any of the 172 skills directly in the
browser using the user's own Claude API key (stored only in localStorage,
sent straight to api.anthropic.com).

- build-skills.mjs: generates skills.json from skills/*/SKILL.md, parsing
  frontmatter, the Required Inputs section (-> form fields), and a one-line
  summary for each skill tile.
- Tile gallery with bundle tag, title, and one-line description; search +
  bundle filter; click a tile to open an auto-generated input form.
- Streams output via the Anthropic Messages API (direct browser access),
  with copy/download, model picker, and Show/Hide key toggle.
- Product Notes logo in the header.
- README: add Skill Playground section + screenshot, a table of contents,
  and collapse the long changelog and full skills list into <details> blocks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-09 11:58:59 +01:00

110 lines
4.2 KiB
JavaScript

#!/usr/bin/env node
// Generates web/skills.json from the canonical skills/ directory.
// No dependencies — run with: node web/build-skills.mjs
import { readFileSync, readdirSync, writeFileSync, existsSync, statSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const __dirname = dirname(fileURLToPath(import.meta.url));
const root = join(__dirname, '..');
const skillsDir = join(root, 'skills');
const pluginsDir = join(root, 'plugins');
// --- Map each skill name -> plugin bundle (for grouping/filtering) ---
const skillToPlugin = {};
if (existsSync(pluginsDir)) {
for (const plugin of readdirSync(pluginsDir)) {
const pSkills = join(pluginsDir, plugin, 'skills');
if (existsSync(pSkills) && statSync(pSkills).isDirectory()) {
for (const s of readdirSync(pSkills)) skillToPlugin[s] = plugin;
}
}
}
// --- Parse YAML-ish frontmatter (name + description only) ---
function parseFrontmatter(text) {
const m = text.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
if (!m) return { meta: {}, body: text };
const meta = {};
for (const line of m[1].split('\n')) {
const kv = line.match(/^(\w[\w-]*):\s*(.*)$/);
if (kv) {
let v = kv[2].trim();
if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
v = v.slice(1, -1);
}
meta[kv[1]] = v;
}
}
return { meta, body: m[2] };
}
// --- Extract input fields from the "Required Inputs" style section ---
function parseInputs(body) {
const lines = body.split('\n');
const headingRe = /^#{2,3}\s+.*(required inputs|inputs needed|information needed|what (i|you).*need)/i;
let i = lines.findIndex((l) => headingRe.test(l));
if (i === -1) return [];
const inputs = [];
for (let j = i + 1; j < lines.length; j++) {
const line = lines[j];
if (/^#{1,3}\s/.test(line)) break; // next section
const bullet = line.match(/^\s*[-*]\s+(.*)$/);
if (!bullet) continue;
const content = bullet[1];
const boldMatch = content.match(/\*\*(.+?)\*\*/);
if (!boldMatch) continue;
let label = boldMatch[1].replace(/\s*\/\s*/g, ' / ').trim();
// hint = remainder after the first bold label
let rest = content.replace(/\*\*(.+?)\*\*/, '').replace(/^[\s—:-]+/, '').trim();
rest = rest.replace(/\*\*/g, '').replace(/^\((.*)\)$/, '$1').trim();
const optional = /optional/i.test(content);
const long = /notes|description|summary|data|what happened|details|paste|context/i.test(
label + ' ' + rest
);
inputs.push({ label, hint: rest, optional, long });
}
return inputs;
}
// First sentence of the description, trimmed — used as the tile one-liner.
function summarize(desc) {
if (!desc) return '';
let first = desc.split(/(?<=\.)\s+/)[0].trim();
// If the first sentence is just a trigger ("Use when…"), fall back to the whole thing.
if (/^use\b/i.test(first) && desc.length > first.length) first = desc;
first = first.replace(/\s+/g, ' ').trim();
if (first.length > 150) first = first.slice(0, 147).replace(/[\s,;:]+\S*$/, '') + '…';
return first;
}
function titleFromName(name) {
return name
.split('-')
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(' ');
}
const skills = [];
for (const name of readdirSync(skillsDir)) {
const file = join(skillsDir, name, 'SKILL.md');
if (!existsSync(file)) continue;
const text = readFileSync(file, 'utf8');
const { meta, body } = parseFrontmatter(text);
const titleHeading = body.match(/^#\s+(.+)$/m);
skills.push({
name: meta.name || name,
title: (titleHeading ? titleHeading[1] : titleFromName(meta.name || name)).replace(/\s+Skill$/i, ''),
description: meta.description || '',
summary: summarize(meta.description || ''),
plugin: skillToPlugin[name] || 'other',
inputs: parseInputs(body),
instructions: body.trim(),
});
}
skills.sort((a, b) => a.title.localeCompare(b.title));
const out = { generatedAt: new Date().toISOString(), count: skills.length, skills };
writeFileSync(join(__dirname, 'skills.json'), JSON.stringify(out));
console.log(`Wrote web/skills.json — ${skills.length} skills, ${Object.keys(skillToPlugin).length ? new Set(skills.map(s=>s.plugin)).size : 0} bundles.`);