I shipped 4 React libraries in a weekend

This weekend I wanted to release something open source. Usually I build apps but I really wanted to see if I could publish an npm package. Well things got out of hand...

I published not 1, not 2, not 3… but 4 packages 😄

Here's a quick walkthrough

React Kino: cinematic scroll-driven storytelling for React
website · github

React Tourlight: onboarding tours and feature highlights for React
website · github

React Redact: one keyboard shortcut to make your app demo-safe
website · github

React Clickmap: privacy-first heatmaps for React, your data, your database, zero cloud
website · github

How it actually happened.

I started with the least glamorous part: idea selection. I asked an agent to go hunting for gaps in the React ecosystem. Stuff that’s outdated, broken on newer React, weirdly licensed, or just stuck in 2018 with a UI to match. Tour libraries are a perfect example: Tourlight exists because the most popular option (React Joyride) is broken on React 19 and leans on deprecated APIs, while other alternatives come with licensing or integration issues.

Once I had a list of candidates, I picked four that I personally liked.

I then wrote a real PRD for each library before anyone touched code. This is where you sharpen the axe. I asked Claude to do extensive research for dependencies and modern tooling before they committed to a stack. Look at what people were complaining about to hone in on features etc.

After that, I went full parallel:

Claude Code on one end, Codex on the other, Cursor Auto (it's ok) on the other. I assigned one project per agent and basically said: “You own it end-to-end. Follow the PRD. Keep it tight. Ship something I’d actually install.”

The second big thing I did was add “taste” to the pipeline.

I gave Claude a front-end design skill so it wouldn’t default to the usual LLM look (we all know it: ugly purple gradients, weird spacing etc). Then for anything visual, I used an Agent Browser workflow so the agent could literally look at the UI, take screenshots, and iterate. Without that, the agent is basically blind and will happily ship something ugly with total confidence.

Finally, I treated launch assets as first-class. No good OSS launch without a short video and clean README media. Remotion made this unfair: it’s programmatic, so agents can take screenshots from the demos and turn them into a polished launch clip, plus generate supporting GIFs/images for the README and docs. throw in a cool music track and you're 95% to a 10K professional video.

After each PRD was fully implemented, I ran a cross-review. If Claude built one project, I had Codex review it. If Codex built one, I had Claude review it. Different eyes catch different problems. It also forces clarity: if an agent can’t explain your API back to you in plain language, your API is probably too complicated.

What came out of that assembly line is the four packages.

React Kino is the “Apple scroll page” itch, but done in a React-native way. The README calls out that the core scroll engine is under 1 KB gzipped and directly compares it to GSAP ScrollTrigger’s size. The design choice I cared about is that it’s declarative: you compose components like <Scene> and <Reveal> instead of writing imperative timelines. It also ships a CLI (npx u/react-kino/cli init) plus templates you can drop in, which is basically me admitting the truth: people want “wow” in 60 seconds, not a blank canvas.

React Tourlight exists because onboarding tours are a mess right now. In the README I’m blunt about the motivation (Joyride broken on React 19, licensing issues elsewhere) and I wanted something that looks modern by default. The implementation leans on CSS clip-path for the spotlight, uses Floating UI for positioning as a peer dep, and it’s explicitly built around accessibility (focus trap, keyboard nav, WCAG 2.1 AA claims).

React Redact is the “oh no I’m screensharing prod data” button. Wrap the app in <RedactProvider>, hit ⌘⇧X or Ctrl+Shift+X, and anything you mark gets blurred/masked/replaced. It also supports a ?redact=true param and an auto-detection component that scans for emails, phone numbers, SSNs, credit cards, IPs, plus custom regex.

React Clickmap is my privacy-first take on heatmaps. It captures clicks, scroll depth, pointer movement, rage clicks, and dead clicks, then renders GPU-accelerated overlays. The core is adapter-based: you can use a fetch endpoint, Postgres adapter, Supabase adapter, or bring your own. It also bakes in privacy signals like DNT and Global Privacy Control in the provider options. The whole pitch is “no third-party analytics, no cloud, no vendor lock in”.

The biggest takeaway from the weekend is not “agents write code now.” That’s the boring part.

The real shift is that shipping is now limited by your ability to:

• choose what to build (taste)

• specify it clearly (PRDs)

• have a solid verification process (tests, agent browswer, multi agent review)

• polish the last 10 percent (docs, visuals, launch)

Agents multiply you. They don’t replace you.

Hope this was helpful. Now go build!