Reduce Friction with Automated Package Generation

Mae Capozzi · April 5, 2020

When you're working on a component library for your organization, you want your teammates to contribute. If your teammates aren't contributing to your efforts, it could mean a couple of different things.

  1. They don't believe in the initiative or don't understand the value of component libraries
  2. It's too difficult to get started
  3. The organization is prioritizing short-term wins over long-term wins, and PMS / engineering managers are not supporting developers' efforts to contribute

As an individual contributor, you might not be able to solve problems #1 and #3, but you can make it easier to contribute to your library by providing developers with tools to get up and running more quickly. By simplifying the process, you're also positively impacting problems #1 and #3 indirectly.

An example is package creation. Every single person who adds a component to your library needs to create a new package.

When using TypeScript, a contributor needs to set up a package.json, tsconfig.json, and a README.md that matches the conventions you have in your project. This can be time-consuming, depending on how familiar the contributor is with the library. It's also something that you can automate in an afternoon. It's a high-value, low-effort win.

You should start by creating an example package that can serve as a guide for people new to the repo. It'll probably have a package.json with some commonly used scripts, and a tsconfig.json file with common defaults set.

You can take a look at what an example package might look like here.

Once you have an example package, you can write a script to allow developers to generate a new package from the command line.

I wrote a script like this that almost every contributor to my organization's component library has used. You can use this script as an example to write one that works with your library's filesystem.

gist:maecapozzi/10f261931193411e8b7feee4cf325dfd#generatePackage.js

When the script is run, the output looks something like this:

Continue Reading

aitypescriptdeveloper-tools

Tooling migrations don't have to take weeks anymore

I used to block out weeks for tooling migrations. Now I let Claude Code run in the background, check in when it's done, and pair with it to understand what changed.

Read Post
frontend platformsystems thinkingobservability

Frontend Technical Debt Is a Business Problem

Frontend technical debt doesn't just slow down developers. It undermines your entire business through user attrition, legal risks, and revenue loss. Here's how to spot and communicate these hidden costs.

Read Post
aideveloper-tools

AI-Assisted Dependency Review

How I used Conductor and Claude to streamline my team's Dependabot review workflow — and how a colleague turned it into a GitHub Action

Read Post