Skip to main content

Migrate skill

The bestax-migrate skill teaches an agent to move an existing app off an unmaintained React Bulma library and onto @allxsmith/bestax-bulma on Bulma v1. Three sources are supported:

  • react-bulma-components v4 — unmaintained since 2022, Bulma 0.9.x — guide
  • rbx v2 — abandoned in 2019, and it pins bulma@0.7.5 as a direct dependency, so migrating is what frees an app to choose its own Bulma version. The four Bulma extensions it pulled in are reported for you to remove, not deleted — guide
  • bloomer 0.6 — archived in 2018, Bulma 0.6 era, built on React 16 and create-react-class. Its flat exports become bestax's compound components, and its Font Awesome 4 icons are the thing to watch — guide

It drives the bestax-migrate codemod and then resolves everything the codemod flags.

Like the rest of the bundle, create-bestax offers to preinstall this skill; it stays idle until the agent meets code that still imports one of those libraries.

Install​

npx skills add https://github.com/allxsmith/bestax --skill bestax-migrate

What the agent does with it​

  1. Picks the source library from the app's imports, runs pnpm dlx bestax-migrate <source> src/ --dry, reviews the report, then applies the codemod for real — that rewrites the components, the stylesheets (CSS/SCSS onto Bulma v1 + the bestax extras), and package.json (the old library removed, @allxsmith/bestax-bulma added, bulma → ^1, node-sass → sass).
  2. Installs the rewritten dependencies (npm install / pnpm install) — the codemod never runs a package manager itself, and its peer-deps report entries call out React (older than 18) or Font Awesome (older than 6) blockers first.
  3. Greps for TODO(bestax-migrate) comments and resolves each one using the skill's reference tables — the component map, the universal prop map, and per-case recipes for the patterns the codemod deliberately refuses to guess at (Tile → Grid, controlled Dropdown, touch breakpoints, dynamic prop values, …).
  4. Finishes the flagged CSS cases (computed Sass variables, indented-syntax files, third-party Bulma extensions) and verifies the build.

Example prompt​

This app uses rbx. Migrate it to @allxsmith/bestax-bulma following the
bestax-migrate skill, and make sure the build passes when you're done.

References bundled with the skill​

The mapping tables are per source — references/react-bulma-components/, references/rbx/ and references/bloomer/ — each holding the same three files:

  • component-map.md — every component of that library (and every compound sub-component) with its bestax target.

  • prop-map.md — the modifier-prop conversions and breakpoint-object flattening.

  • unmappables.md — a recipe for every TODO(bestax-migrate) the codemod can leave.

  • references/css-migration.md — the Bulma 0.9 → 1 CSS step, shared by all three: the stylesheet work is about Bulma, not about which wrapper you came from. A bloomer app starts from Bulma 0.6, so it crosses that step plus the 0.6 → 0.9 changes before it; the reference says which it covers.

See the full migration guides for the codemod itself: react-bulma-components · rbx · bloomer.