Team tool · for designers

Which layer of the stack is this?

I built the Stack Wizard to help the designers on my team pick the right library across our stack, layer by layer: TypeScript, React, Tailwind and shadcn/ui.

Try the wizard The four layers

Ask it something

Pick a question. The layer that answers it lights up, with the line of code behind it. Rebuilt for this page.

shadcn/uiReady-made, accessible components to start from.

TailwindThe styling, written with design tokens.

ReactThe building blocks and what they do when used.

TypeScriptThe rules: what each component accepts.

shadcn/ui

shadcn/ui already has an accessible dropdown. Start from that before designing a new one.

example.tsx

<DropdownMenu>
  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
</DropdownMenu>

The four layers

What each one decides, and what a designer owns there.

Decides

Ready-made, accessible components to start from.

For designers

Check here first: if the component exists, design from it rather than drawing a new one.

Why I made it

Picking the right library

Designers on my team needed to know which library a decision belongs to. The wizard walks through it layer by layer.

Figma should match the code

I push for Figma variables that match the code tokens, so developers don’t hardcode values.

Part of teaching the team

It sits alongside the sessions I run on Storybook, design pull requests and AI tools for design.