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>
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
# 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.
|
||||
|
||||
## 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, and writes `skills.json` (the UI's data source).
|
||||
- `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.
|
||||
Reference in New Issue
Block a user