@slowbot/make-kit-comet

Runtime for the GDS Make Kit (Comet edition). Make-sandbox Vite shim, raw USWDS wrappers, and the Simpler Grants theme bundled as the default. Theme-agnostic: future programs ship CSS-only sibling packages.

Built for Figma Make projects (and any other Vite + React project) on top of @metrostar/comet-uswds + @uswds/uswds.

What's in the box

• cometMakeKit() Vite plugin — three Make-sandbox workarounds bundled as one plugin: USWDS asset middleware, image-import rewrite, esbuild rewrite for pre-bundled deps.
• Raw-USWDS React wrappers — <UsaBanner />, <UsaAccordion />, <UsaFooter /> plus the inline-SVG icons they rely on. These substitute for comet's <Banner /> and <Accordion /> inside Figma Make's preview, where comet's bundled assets can't reliably be reached.
• Simpler Grants theme bundle — the precompiled USWDS + Simpler theme CSS, shipped as the default ./styles export (minified) plus a ./styles/dev opt-in for readable debugging. Mirrors USWDS's own uswds.css / uswds.min.css convention.
• Templates — drop-in vite.config.ts, App.tsx, main.tsx, index.html, src-styles-index.css for spinning up a fresh project.

Install

npm install @slowbot/make-kit-comet @uswds/uswds @metrostar/comet-uswds

Or pin in package.json:

{
  "dependencies": {
    "@slowbot/make-kit-comet": "^0.2.0",
    "@uswds/uswds": "^3.13.0",
    "@metrostar/comet-uswds": "^3.9.0"
  }
}

The package ships with dist/ and styles/simpler/simpler-uswds.min.css pre-built in the tarball, so install is a normal npm-registry resolution — no build step runs on the consumer's machine.

For consumers who can't reach npmjs.com (rare) but can reach GitHub, the package is also installable from the matching tag: npm install github:slowbot/make-kit-comet#v0.2.0. That path triggers the prepare script to build dist on install. Prefer the npm registry install for any sandboxed environment (Figma Make, CI, etc.).

Use

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { cometMakeKit } from "@slowbot/make-kit-comet/vite";

export default defineConfig({
  plugins: [react(), cometMakeKit()],
});

/* src/styles/index.css */
@import "@slowbot/make-kit-comet/styles";

// anywhere
import { UsaBanner, UsaAccordion, UsaFooter } from "@slowbot/make-kit-comet";
import { Alert, Button } from "@metrostar/comet-uswds";

export default function App() {
  return (
    <>
      <UsaBanner />
      <main>
        <Alert id="info" type="info">Hello from comet.</Alert>
        <Button id="save" type="button">Save</Button>
        <UsaAccordion
          items={[
            { id: "a", heading: "First", content: <p>Body A</p>, defaultExpanded: true },
            { id: "b", heading: "Second", content: <p>Body B</p> },
          ]}
        />
      </main>
      <UsaFooter />
    </>
  );
}

Style entry points

| Import path | What it loads | |---|---| | @slowbot/make-kit-comet/styles | Default = Simpler theme, minified | | @slowbot/make-kit-comet/styles/dev | Default theme, unminified for DevTools / grep | | @slowbot/make-kit-comet/styles/simpler | Simpler theme explicitly, minified | | @slowbot/make-kit-comet/styles/simpler/dev | Simpler theme explicitly, unminified |

To use a different theme later, install a sibling theme package and change one line:

/* swap from Simpler default to another program's theme */
@import "@slowbot/make-kit-comet-theme-<program>/styles";

See THEMES.md for the sibling-theme-package contract.

Smoke checklist

After install + npm run dev, you should see:

• Federal gov banner with the US flag rendered as an inline SVG. Click "Here's how you know" to expand.
• comet <Alert> with the info icon (cyan panel).
• comet <Button> row in mint with a 5px bottom bar (NOT USWDS blue).
• Accordion with +/- chevrons that toggle correctly.
• Body text in Public Sans (not Helvetica / system-ui).
• Browser console clean — no 404s on /uswds/*.

If buttons are USWDS blue, you're loading vanilla USWDS on top of Simpler. Check src/styles/index.css for a stray @import "@uswds/uswds/dist/css/uswds.min.css" and remove it.

If the gov banner flag is missing or accordion chevrons don't render, you've replaced <UsaBanner /> / <UsaAccordion /> with comet's <Banner /> / <Accordion />. Restore the wrappers. The full reasoning is in the source kit's MAKE-SANDBOX-WORKAROUNDS.md (link assumes the sandbox itself gets pushed to GitHub under the same handle; until then, reference the local file).

Figma Make installer skill

A companion /install-simpler-runtime Figma Make skill exists that pulls this package into a fresh Make project in one slash command. See the source kit's skills/README.md for upload/publish instructions.

Manual install (non-Make Vite projects)

See INSTALL.md.

Theme contract for sibling packages

See THEMES.md.

License

MIT. Use freely; attribution appreciated.