The Prototype Skill.mp4

The Prototype Skill

Since working on this course for the first time, I've been doing a lot more prototyping and I'm even more convinced that it's a fantastic way to flush out unknown unknowns during the planning process.

To that end, I've built a prototype skill in my skills repo. It's a little bit churny at the moment - it's undergoing quite a lot of changes, so it's not quite ready to go into the course. But I wanted to point it out to you as a cool thing that you can use when you want to do prototyping during a grilling session or during any stage in the process.

Installing the Prototype Skill

You can install my skills by running:

npx skills@latest add mattpocock/skills

Then choose prototype to get the /prototype skill.

You can also find the skill on GitHub at https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype.

Two Core Branches

In its current state, the prototype skill has two branches:

UI Testing Branch

For UI testing, the skill generates several radically different UI variations on a single root, switchable via a URL search param and a floating bottom bar.

This means you get a little bottom bar on the bottom of the screen that you can click left and right to show the possible prototypes in the UI you're building.

This is incredibly cool for UI design. You can figure out what something should look like by comparing radically different variations. You can iterate by saying: "We've got A, B, and C to decide between. I like the look of A, but let's take a little bit from C."

Logic Testing Branch

The logic variant is what I tend to use more often. It allows you to build a tiny interactive terminal app that pushes the machine through cases that are hard to reason about on paper.

If you have a complicated data model or something that's changing over time (like most apps do), you can see it in the terminal. It will give you interactive key presses to press in order to move through time.