Round #27Score 4.5/5Foundation / generic UI

Generic components worked, but the calendar layer did not exist

Route: /schedule
Desktop preview
Mobile preview

Captured at a 375px viewport. Long pages scroll inside the frame.

The screenshots stay in Japanese. Every round is a real screen for a real Japanese industry, so an English re-render would no longer be the screen the agent actually produced.

Write-up

Generic components worked, but the calendar layer did not exist

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. This round covered a ⁠week-view calendar and scheduler with positioned events⁠.

As before, I supplied the shipped npm package and docs site while keeping the source private. The assignment was a Google Calendar-style week view with a toolbar (week navigation, Day, Week, and Month switching, and New), a seven-day time grid, an all-day lane, ⁠event blocks positioned from start and end times, with overlaps arranged side by side and category colors⁠, a current-time marker, an event-detail Popover, a creation Dialog from an empty slot, and a single-day or list view at 375px.

Result: 4.5/5, with polished generic components and no domain layer

tsc and build passed, the console stayed clear, and ⁠the server and browser output matched with no hydration errors⁠ because a mounted flag delayed the current-time marker. ⁠The page had exactly one h1; each event was a labeled button such as "title, 10:00 to 11:00"; today used both color and screen-reader-only "(Today)" text; overlapping events sat side by side; all-day events occupied the top lane; nothing overflowed at 375px; and dark mode worked throughout.⁠

⁠Everything around event placement composed cleanly:⁠ ToggleGroup in segmented mode with role="radio", Dialog with focus containment and automatic ARIA, Popover with an overridable width, and ⁠tone tokens⁠ using bg-{tone}-subtle for five category colors. The agent also praised CardTitle as from issue #116 for the fourth time.⁠ Earlier fixes kept paying off.

Why it stopped at 4.5: no scheduler-specific rendering layer

@gunjo/ui has no scheduler rendering layer (issue #142, major).⁠ It provides no time-axis grid, positioned event blocks, overlap packing, all-day lane, or current-time marker. Calendar is a ⁠date picker built on react-day-picker⁠, with no formal API for displaying events on dates beyond class-name hooks. The agent therefore ⁠hand-rolled about 280 lines for the week-view content plus the complete overlap-layout algorithm.⁠

The generic components, including Card, Popover, Dialog, Button, and the tone tokens, formed a strong frame around the hand-rolled grid. ⁠The calendar-domain layout itself was absent.⁠

What I fixed this round

  • Issue #141:⁠ Calendar enabled ⁠Japanese public holidays by default⁠, which was surprising for international consumers of the public npm package. I changed showHolidays to ⁠default to false, making holidays opt-in.
  • ⁠I revised the scope of issue #140:⁠ the duplicate w-72 w-[288px] and rounded-md rounded-lg classes in Popover ⁠were required by two drift checks that expected different expressions.⁠ Removing them as a simple cleanup would break verification, so the follow-up needs to align the drift-check infrastructure.
  • Issue #106, semantic Badge tones:⁠ without info, success, and warning, badges could not carry category colors. This was the second report after the missing success tone in . Because the work included .pen (the design-source files), the complete tone set went to the design-side change.

The scheduler component in issue #142 was substantial new work, so it went to the beta gate.

What I took away: a generic library and a domain rendering layer are different things

Generic layer (shells, forms, overlays, charts, and tone tokens): strong enough to frame almost any screen
Domain rendering layer (scheduler, calendar, and time-axis grid): absent, even though it carries the substance of this screen

Earlier gaps were component defects or missing props. ⁠Round #27 exposed a different scale of problem: an entire domain-specific rendering layer was absent.⁠ Gunjo's generic layer remained strong, and the agent produced sound accessibility by hand, but a library that claims scheduler coverage needs dedicated components. ⁠The stronger the generic layer became, the clearer that missing domain layer looked.⁠ This was the same pattern as PricingTemplate in issue #80, at a larger scale.

Next up: build log

  • ⁠An error page, setup wizard, or file browser⁠, continuing to test domain layers and higher-level composition.

The run

  • gunjo.jp / npm @gunjo/ui / GitHub
  • Earlier rounds: through
  • 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.

This series is co-created with AI (Claude and Codex). A human designs the experiments, makes the calls, and fact-checks before publishing; the AI does the hands-on work and drafting.

Components from @gunjo/ui

The components this screen's source imports directly.

The code the agent actually wrote

Click a file to expand its source.

業界別「AI指示書パック」、先行登録を受付中です。