html-to-react

natankatsif/html-to-react-skill@main

SKILL.md

HTML → React, token-lean

The expensive way to do this is to read the whole page and retype it as JSX: the model pays for every byte twice (input and output), drifts on long files, and copies junk (wrappers, dead classes, scripts) into React. This skill splits the work instead:

  • Scripts (deterministic, free): parse HTML+CSS+JS, delete what React must not get, turn CSS into Tailwind utilities through a real cascade, detect repeated blocks and turn them into data + .map(), write every file, copy assets, verify.
  • You (judgment only): read a ~1-2k token outline, decide component boundaries and names in a small JSON plan, then re-implement the page's JavaScript behavior with React state using small edits.

Never read the source HTML/CSS files and never type markup by hand: the outline has what you need, and the generator carries every class and attribute over verbatim.