UI foundations

330 minutes across 19 steps. The UI layer end to end: atoms through organisms, props, events, accessibility and the loading states nobody designs until they ship.

UI foundations 0 of 0 done (0%)

1. Mark ui/element done ui/element reading
2. Mark ui/component done ui/component reading
3. Mark ui/props done ui/props reading
4. Mark ui/events done ui/events reading
5. Mark ui/atomic-design done ui/atomic-design reading
6. Mark ui/atom done ui/atom reading
7. Mark ui/molecule done ui/molecule reading
8. Mark ui/organism done ui/organism reading
9. Mark ui/skeleton done ui/skeleton reading
10. Mark ui/accessibility done ui/accessibility reading
11. Mark atom-boundaries done Where does an atom stop? quiz · easy · 8 min
12. Mark ui-props-basics done Validating Prop Usage quiz · easy · 7 min
13. Mark props-defaults done Setting Default Values for Props quiz · easy · 7 min
14. Mark presentational-vs-container done Presentational vs container components quiz · easy · 5 min
15. Mark ui-events-basics done Handling DOM Events quiz · easy · 8 min
16. Mark loading-button-atom done Build a loading Button atom ui-coding · easy · 30 min
17. Mark skeleton-list done Replace a spinner with a skeleton ui-coding · easy · 25 min
18. Mark accessible-combobox done Build an accessible combobox ui-coding · hard · 45 min

    The hard one. Do it without a mouse.

19. Mark harness-atom-guardrail done Write a guardrail for the ui-atom skill harness · medium · 40 min

    Turn everything above into a script that enforces it.

The UI layer is the one people think they already know, which is why it is the one where interviews go sideways. Everyone can build a button; far fewer can say why the fetch does not belong inside it.

This plan walks the atomic hierarchy in order and then makes you build at each level. The accessibility work near the end is not a coda — the combobox is the hardest thing here, and it is hard for reasons that have nothing to do with JavaScript.

Finish with the harness exercise. Turning “this is a good atom” into a script that decides is the moment the rest of the plan stops being opinion.