Vitops
☰

Releases

Installation

Install the Vitops toolchain and generate your first output — for Astro, Tailwind, WordPress/Bricks, or plain CSS.

On this page

Every package in the toolchain shares one version. Install @getvitops/cli and let it pull the rest, or add the integration for your platform directly.

Pick your entry point

@getvitops/astro wraps the generator, the Vite plugin, favicon generation and the web-component bundles behind a single integration.

npm i -D @getvitops/astro
import { defineConfig } from 'astro/config';
import vitops from '@getvitops/astro';

export default defineConfig({
  integrations: [
    vitops({
      css: { input: 'design-system.json', format: 'tailwind', out: 'src/styles' },
      favicon: { source: 'src/assets/logo.svg', name: 'My Site' },
    }),
  ],
});

The config can be your site config. css.input takes a design-system.json or the larger site config that embeds one under designSystem.themes.<name> — they’re told apart by shape, so the file can be called company.json. If you already keep your tokens there, point this at that file rather than maintaining a second one; it also supplies the site-level facts generation reads (default colour scheme, legal documents, icon sprite).

Then drop <Head /> into your layout’s <head> — it emits the favicon/PWA tags and the web-component runtime in the right order:

---
import Head from '@getvitops/astro/Head.astro';
---
<html lang="en">
  <head><Head /></head>
  <body><slot /></body>
</html>

CLI (any stack)

npm i -D @getvitops/cli
npx vitops init                                          # scaffold design-system.json
npx vitops generate --format css --out dist              # standalone stylesheet
npx vitops generate --format bricks --out <theme>/dist   # WordPress / Bricks payload

Vite (non-Astro)

npm i -D @getvitops/vite
import vitops from '@getvitops/vite';

export default { plugins: [vitops({ input: 'design-system.json', out: 'src/styles' })] };

Version pinning

@getvitops/core, generator, utils, cli, vite and astro are released together and are only supported at matching versions. This isn’t a convention — the generator embeds a snapshot of core’s CSS and web-component bundles, while the Astro integration copies the installed core’s bundles into your public/. Mixing versions can leave the stylesheet and the components disagreeing about what a class means.

@getvitops/emdash and @getvitops/create have no @getvitops/* dependencies and version independently.

Teach your coding agent

npx vitops agents

This links the packaged vitops-design-system skill into .agents/skills/ and .claude/skills/, and writes a managed pointer block into your AGENTS.md. The skill teaches agents to fetch reference docs live from your config with vitops docs <topic> — so they get your colours, your scales and your class vocabulary rather than a generic guess.