Claude
69d4fab0b3
The check-generated CI step was failing with "web/skills.json is stale" because build-skills.mjs stamped a wall-clock generatedAt into the file, so every rebuild differed and git diff --exit-code never matched. - web/build-skills.mjs: drop the unused generatedAt timestamp -> deterministic output the CI staleness check can verify. Also tags each skill with its tier. - skill-tiers.json: single machine-readable source for tier membership (Production-Ready / Experimental); TIERS.md points to it. Playground upgrades (hosted on GitHub Pages): - Tier filter (Production-Ready / Stable / Experimental) + per-tile tier badges. - "Use this skill in another tool" panel: copy the instructions formatted for ChatGPT, Gemini, or raw — mirrors the generated exports/ files. - web/README documents the new options and the deterministic build. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016JWn5jRD5tcEFKrubjQ6Px
48 lines
2.1 KiB
Markdown
48 lines
2.1 KiB
Markdown
# Skill Playground
|
|
|
|
A zero-backend web app to run any skill in this repo with **your own Claude API key**.
|
|
Pick a skill → it becomes a form → fill it in → Claude executes the skill's instructions
|
|
and streams the result. Your key is stored only in your browser (`localStorage`) and sent
|
|
directly to `api.anthropic.com`. Nothing touches a server we own.
|
|
|
|
## What you can do
|
|
|
|
- **Search and filter** the full library by keyword, **bundle**, and **maturity tier**
|
|
(🟢 Production-Ready · 🔵 Stable · 🟡 Experimental) — every tile shows its tier.
|
|
- **Run a skill** against the Claude API and stream the output (copy or download as `.md`).
|
|
- **Use it in another tool** — each skill has a *"Use this skill in another tool"* panel
|
|
that copies the instructions formatted for **ChatGPT**, **Gemini**, or as raw text, so
|
|
you can paste it into any assistant. (Same output as the generated `exports/` files.)
|
|
|
|
## Run locally
|
|
|
|
```bash
|
|
node web/build-skills.mjs # regenerate skills.json from skills/
|
|
cd web && python3 -m http.server 8000
|
|
# open http://localhost:8000
|
|
```
|
|
|
|
> It must be served over HTTP (not opened as a `file://` URL) so `fetch('skills.json')` works.
|
|
|
|
Paste a key from [console.anthropic.com](https://console.anthropic.com/settings/keys) and run.
|
|
|
|
## How it works
|
|
|
|
- `build-skills.mjs` scans `../skills/*/SKILL.md`, parses the frontmatter and the
|
|
**Required Inputs** section, tags each skill with its tier (from `../skill-tiers.json`),
|
|
and writes a **deterministic** `skills.json` (the UI's data source — no timestamp, so CI
|
|
can verify it stays in sync).
|
|
- `app.js` sends the skill's instruction body as the `system` prompt and the filled-in
|
|
fields as the user message, using the Anthropic Messages API with
|
|
`anthropic-dangerous-direct-browser-access: true` for direct browser calls.
|
|
|
|
## Keep it in sync
|
|
|
|
Re-run `node web/build-skills.mjs` whenever skills are added or edited, and commit the
|
|
updated `skills.json`. (Or wire it into CI / a pre-commit hook.)
|
|
|
|
## Deploy
|
|
|
|
It's fully static — host the `web/` folder on GitHub Pages, Netlify, Vercel, or any
|
|
static host. No environment variables, no server.
|