The args Panda never saw

Date: 2026-11-09. Context: the governed design system (feat/ds-governed, guide 06).

What happenedCopy Anchor Link

The new Stack and Grid got their stories the way every other story is written: the props in args, the render function spreading them.

export const Responsive: Story = {
  args: { flexDirection: { base: "column", md: "row" }, gap: "4" },
  render: (args) => <Stack {...args}>…</Stack>,
};

Storybook built. Axe found nothing. The types were happy. In the browser, at 1000 pixels, the two cards sat one under the other: no md: row. The Grid stories had no columns at all. The Row story looked right, but only because apps/web already used flexDirection="row", so that class existed by chance.

Panda generates CSS at build time, from the values it can read in the source. A value written in an args object and spread into the component at run time is not one of them. The component asked for the class names, the class names were right, and the stylesheet did not have them.

What we learnedCopy Anchor Link

• Panda reads more than literals, but not values that arrive. A probe showed which: a literal, a local const, both branches of a ternary and an object literal spread in the JSX all generate CSS. A value that comes from a function parameter, or from Storybook's args, does not.
• It fails like anecdote 09 and 12: silently. The compiler sees a valid prop, the grader a valid token, axe an accessible page. Only a person looking at the page, or a check that reads computed styles, sees the missing gap.
• The governed model makes it more likely, not less. Layout now goes through props. An agent writing a reusable component that forwards gap to a Stack hits exactly this.

What it means for VektosCopy Anchor Link

A page whose layout silently disappears is a real failure the benchmark does not count today: neither as a design-system violation (the agent used the props correctly) nor as a quality one. The page checks catch a page that breaks; a visual diff against the reference page would catch this one, and it is still waiting for a pinned browser (guide 11).

Follow-upsCopy Anchor Link

• The stories now write layout values in the JSX, with a comment saying why; guide 06's "Extend it" says the same.
• A grader rule for a layout prop whose value is not static (an identifier Panda cannot resolve) would count it. It needs care: a local const is fine.
• Panda's staticCss could pre-generate the layout props for every spacing token, at the cost of a bigger stylesheet. Not done: it would hide the problem in pages too.