A web-compatible VS Code extension that validates Claude Code plugin
marketplaces in the browser (github.dev / vscode.dev) and on desktop.
It surfaces problems as editor diagnostics (squiggles + Problems panel),
running inside github.dev's WebWorker extension host (no Node APIs). See
CLAUDE.md for design & roadmap.
What it validates
Frontmatter (SKILL.md, agents/*.md, commands/*.md) — via in-process
diagnostics over a declarative field engine:
- Required vs recommended (per the docs, by file type): a
SKILL.md
description is recommended (a Warning if missing — Claude falls back to the
first body paragraph); agents require name + description (an Error);
commands may omit frontmatter entirely.
- Enum values are checked against the docs, e.g.
model
(sonnet/opus/haiku/fable/inherit or a claude-* id), effort
(low/medium/high/xhigh/max), shell (bash/powershell),
context (fork), agent permissionMode / color / memory / isolation.
- Types (booleans, lists, maps), kebab-case names, length caps, and
unknown fields (warned — Claude Code ignores unrecognized keys).
JSON config (.claude-plugin/plugin.json, .claude-plugin/marketplace.json,
.claude/settings.json + settings.local.json, .claude/keybindings.json)
— via the official SchemaStore schemas wired through contributes.jsonValidation,
giving field validation, enum completions, hover descriptions, and (for manifests)
the discriminated source variants (github / url / git-subdir / npm /
relative path). These need no activation — the built-in JSON language service
applies them, and the hosted schemas track upstream automatically.
Architecture
src/diagnostics.ts — shared Problem shape (code, message, severity, span).src/frontmatter.ts — tolerant --- … --- parsing (eemeli/yaml) with node ranges.src/fieldSpec.ts — the generic, data-driven field-validation engine.schemas/{skill,agent,command}.fields.json — the frontmatter rules as plain
JSON (edit these when the docs change); src/specs/*.ts load them via
load.ts, with the lone open-ended model check in patterns.ts.src/validateSkill.ts / validateAgent.ts / validateCommand.ts — pure
per-type entry points (no vscode import); the test seam.src/hover.ts — pure hover lookup; renders a field's docs from the same specs.src/extension.ts — thin vscode adapter: scans, keeps results live via
document events + FileSystemWatchers, registers the hover provider, maps
offsets/severity to Diagnostics.package.json contributes.jsonValidation — points the JSON config files
(plugin.json, marketplace.json, .claude/settings.json + settings.local.json,
.claude/keybindings.json) at their official claude-code-* schemas on
schemastore.org (no local copies to maintain). Frontmatter rule data lives under
schemas/*.fields.json, bundled into the web worker at build time.esbuild.js — single WebWorker bundle, vscode external → dist/web/extension.js.
Develop & test
See TESTING.md for full step-by-step verification.
npm install
npm run compile-web # build the bundle
npm run open-in-browser # launch test-web against fixtures/sample-marketplace
npm run package # build a shareable .vsix
| |
