Repo tools 1.2.2

The VelinStyle GitHub repository ships two static HTML tools for experimenting with tokens and components. They are not published as npm packages — clone the repo and open the files in a browser (or via any static server). Deutsch: Repo-Tools

Maturity: Theme Builder and Playground are exploration tools in the GitHub repo — not Studio and not a finished AI design system. Release sync / e2e helpers are stable maintainer tooling.

When to use

Experiment with tokens or HTML snippets from a framework clone.
Run release-sync and e2e checks before publishing.

When not

Do not confuse Theme Builder / Playground with a planned Studio product.
Do not publish these tools as npm packages — use the CLI for production workflows.

Theme Builder

OKLCH-based token editing and CSS export, located at tools/theme-builder/ in the repository.

Local: from a clone, open tools/theme-builder/index.html (double-click or npx serve at repo root).
Source on GitHub: github.com/SkyliteDesign/velinstyle/tree/main/tools/theme-builder

Playground

Split-view HTML/CSS playground with theme switch and snippet picker — tools/playground/.

Local: open tools/playground/index.html after cloning.
Source on GitHub: github.com/SkyliteDesign/velinstyle/tree/main/tools/playground

End-to-end tests (Playwright)

Command	Description
`npm run test:e2e`	Cross-browser WC smoke (Chromium, Firefox, WebKit)
`npm run test:e2e:chromium`	Chromium only (faster local check)
`npm run test:a11y:coverage`	Component contract coverage (43/43)

Requires npm run build first. Framework path: tests/e2e/.

Release sync guard

Version numbers live in several machine-readable places across the framework and this site: the CLI manifest, the a11y contracts, velin-agent.json, doc header badges, the landing-page version badges, page-level velin-meta blocks, JSON-LD softwareVersion, and every pinned npm/CDN install snippet. The guard compares them all against package.json in the framework, which is the single source of truth.

It also checks the component counts quoted in prose — “43 canonical Web Components”, “45 lazy-loader entries”, “38/38 contracts” and their German equivalents — against components.count and components.loaderCount in velin-agent.json. Adding a Web Component therefore cannot leave the docs claiming the previous number.

Command	Description
`npm run release:check`	Report drift (framework repo); exits non-zero on mismatch
`npm run release:sync`	Rewrite the mechanical surfaces to the current version
`npm run sync:check`	Same report from the site repo (runs at the end of `npm run build`)

The guard only matches structured patterns, so prose that names an older release — changelog entries, migration notes, “new in 0.9.0” hints — is left alone. Checks that need a human or a build step (a missing changelog section, a hardcoded CLI banner, stale docs/generated/, an unbuilt agent bundle) are reported but never auto-fixed. Site checks are skipped automatically when the sibling velinstyle-site checkout is absent, which is why framework CI can run the same command.

Flags: --json for machine output, --warn-only to report without failing, --skip-site for framework-only runs, --fix to write.

Relation to the CLI

For production workflows (custom bundles, icons, blueprints, scan, tokens build), use the VelinStyle CLI from npm. The repo tools above are for design exploration only.

In the framework repo, run npm run test:a11y and npm run test:contrast before releases (0.7.0+).