The states nobody wants to build closed out Gunjo's first pass

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. After #1 through #7, a command palette, this round covered ⁠empty states, skeletons, and toasts⁠. Nobody wants to build these states, but every app needs them. This completed the first pass through the main categories.

I kept the same boundary: the shipped package and its docs, with the source withheld. The assignment was an /inbox interface that switches among three states, loading with Skeleton, empty with EmptyState, and a list with Card, plus a toast after actions.

Result: 4/5

npm run build passed and the page rendered statically, with ⁠zero console errors and zero accessibility warnings⁠.

The library provided the typed pieces required for state UI. EmptyState produces an icon, heading, description, and call to action in one component. Skeleton supports rectangle, circle, and text shapes. Toast exposes showToast(msg, type) through useToast() and includes role="status" for screen readers. ⁠There was no server-side rendering crash.⁠ The missing dialog Description warning from #7 did not appear because this screen used no dialog, confirming that the issue was isolated rather than leaking elsewhere.

The rough edge: fixed width again, but now it was a known class

rectangle: "h-4 w-[200px]",
text:      "h-3.5 w-[160px]",

Every Skeleton shape except circle had ⁠a fixed width⁠, forcing an override to fill a row. This matched the fixed-default class from issue #47. I had changed the affected controls to fill their containers by default, but Skeleton had escaped the audit. I logged issue #58 to make Skeleton full-width and recheck every fixed-width default; the fix landed in PR#59.

The other findings were ⁠already familiar⁠:

• The docs' code examples did not appear in machine-fetched content, the known issue #50.
• Discovering a valid composition still required reading the bundled source. Avatar composes <AvatarFallback> instead of accepting a fallback prop, for example, and Badge has no primary variant.

After one pass, the rough edges seemed to be running out

After eight cold-agent screens, one trend was clear: ⁠new classes of rough edge had stopped appearing.⁠

Round eight produced almost nothing beyond ⁠another instance of a known class⁠. I had decided to keep running the series until it stopped turning up anything new, and I looked to be approaching that point. Gunjo was still in early alpha at the time, and unknown classes kept appearing. Once they stop and I remove every known class, it will be ready for ⁠beta⁠.

Scoreboard after the first eight

All eight screens ⁠built successfully and scored between 4 and 4.5/5⁠. Every rough edge became an issue. The shared defect from issue #52 was already fixed, and the remaining work had moved into audits of known classes. The point of the series was to ⁠show the process of building a Japanese design system that holds together and works for AI⁠, not only the finished claim.

What comes next

• Remove the remaining known classes: issue #55 for patterns, #56 for type exports, #57 for accessibility, and #58 for fixed widths
• Polish each screen into a reference implementation and ship it in Gunjo Patterns ⁠with evidence⁠
• Move from ⁠alpha to beta⁠ once every check is green

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 / #2 / #3 / #4 / #5 / #6 / #7
• Overview: Gunjo (@gunjo/ui) / Why it exists: Design systems in the age of AI
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.