DEV Community

Cover image for I shipped two frontend libraries in one day using AI agents
Szymon Wolak
Szymon Wolak

Posted on

I shipped two frontend libraries in one day using AI agents

#frontend #ai #vibecoding #react

Today I ended up publishing two small libraries.

Wasn't really planned. I just wanted to try using AI agents seriously and see how far I could push it in one day.

By the evening both were on npm and GitHub, which still feels a bit strange.

These are the two things.

Effects

demo: https://libs.protohiro.com/effects/
https://github.com/protohiro-com/effects

npm install @protohiro/effects
Enter fullscreen mode Exit fullscreen mode

This one is basically a collection of CSS effects for React.

Things like:

gradient borders

glow

noise overlays

The main thing I cared about was not adding extra DOM elements.

I always found it annoying when an effect meant wrapping components in extra divs. That tends to break layouts sooner or later.

So the idea here is just:

const ref = useGlowEffect({
  color: "#3b82f6",
  blur: 20
})

return <div ref={ref}>Card</div>
Enter fullscreen mode Exit fullscreen mode

Nothing fancy really. Just reusable CSS packaged as hooks.

I mostly built it because I kept rewriting the same stuff in different projects.

CSS tokens extractor

https://github.com/protohiro-com/csstokens

npm install -g @protohiro/csstokens
Enter fullscreen mode Exit fullscreen mode

This one is a CLI.

It scans a project and extracts design tokens.

Most projects kind of already have tokens, just not officially.

You usually see something like:

#3b82f6
#2563eb
#3b82f6
#111827
Enter fullscreen mode Exit fullscreen mode

and spacing values like:

6px
8px
10px
12px
Enter fullscreen mode Exit fullscreen mode

So the tool just scans the codebase and generates tokens from that.

Basic usage:

csstokens --profile strict
Enter fullscreen mode Exit fullscreen mode

It generates:

raw-index.json
tokens.json
tokens.css
tokens.ts
report.md
Enter fullscreen mode Exit fullscreen mode

It's still pretty simple right now. Mostly the first version that actually works.

The funny part is that I've never published anything on npm before.

I've been working as a frontend developer for years, but somehow I never pushed a library publicly. Plenty of internal tools, experiments and half-finished repos, but nothing that actually got released.

So today ended up being my first npm publish.

And somehow it turned into two packages instead of one.

I mainly wanted to see if I could go from idea → working library → npm in a single day. Turns out it's actually doable now.

Top comments (0)