Use CSS subgrid to fix your forms based on established design principles. Tip: send this to your AI agent so it can apply it to your forms or turn it into a skill.

Related:

👀

Back to work.

Turning tips like this into a skill is how I work now too. I keep collecting Skill.md and DESIGN.md files so the agent follows rules instead of guessing. Does the subgrid version hold up when labels get really long?

Long labels aren't helpful. If you need more info, add a description below the input, as shown at the end of the video.

Fair point, a short label plus a description below feels cleaner anyway. Do you put those descriptions in the skill too, so the agent does it by default?

Nice demo. Underrate principle in Form's design

Why not stack the labels?

This is specifically for those who want horizontal fields. I prefer horizontal fields for forms in wide desktop containers. Vertical fields look better in narrow containers, dialogs, cards, mobile screens, etc.

I guess container query to the rescue

Oh, sure, you'll want it to be responsive.

Love this videos!! how hard was it to describe them? or did you do it manually?

I built a skill with several assets, references, and instructions, and I've made several videos with it. For each video, I make some adjustments and then ask the agent to update the skill with what it learned. This is the result of a few weeks of doing that, and it keeps evolving.

nice. Opus or another model?

Always Opus

Forms are where my booking pages always looked slightly off, with labels never lining up across rows. Passing this straight to my agent. Does subgrid hold up on narrow phone screens, or do you switch to a single column there?

You'll want to switch to a single column in narrow containers (not just phones, but also cards, narrow modals, etc.). I'd suggest using container queries instead of media queries.