Free course · UI

UI layer: terminology for the AI era

The words that decide where a component belongs, what crosses its boundary and what it owes the people using it — the vocabulary you prompt and review an agent's UI code in.

3 modules · 7 lessons · about 21 min of reading · no signup

Before you start: You can read HTML and a little JavaScript. No framework is assumed; examples come from the React, Vue, Angular and Web Components templates.

Your progress 0 of 0 done (0%)

Start course

What you will be able to do

• Name the boundary of any component an agent hands you — atom, molecule or container — and say what is wrong with it.
• Write props and events as a contract an agent can implement without guessing.
• Ask for loading and accessibility states up front instead of finding them missing in review.

Course contents

Module 1 Speak component

The unit you ask an agent for, the data going in and the events coming out.

1. Mark “Component: the unit you ask an agent for” complete 01 Component: the unit you ask an agent for Component · 3 min
2. Mark “Props: the contract going in” complete 02 Props: the contract going in Props · 3 min
3. Mark “Events: the contract coming out” complete 03 Events: the contract coming out Events · 3 min

Module 2 Atomic design as a review checklist

Use the atomic levels to decide where code belongs before you read a line of it.

1. Mark “Atom: one job, no data” complete 04 Atom: one job, no data Atom · 3 min
2. Mark “Molecule: atoms with one purpose” complete 05 Molecule: atoms with one purpose Molecule · 3 min

Module 3 Ship UI people can use

The two states agents leave out unless you name them.

1. Mark “Skeleton: designing the loading state” complete 06 Skeleton: designing the loading state Skeleton · 3 min
2. Mark “Accessibility: the requirement agents skip” complete 07 Accessibility: the requirement agents skip Accessibility · 3 min