Mobile first approach in breakpoints and AI MCP editing

I just want to ask the devs if the AI editing skills/MCP supports the reversed, mobile-first breakpoint approack? I code my site with this setting:

Does this affect anything when coding with Gemini/Claude/etc? I am trying out this feature. Will the context know about it and respect this?

(I am familiar with AI assisted coding btw, just not for frontend, but backend functions. But I would like to try it out for frontend design too.)

Thank you!

Yes, the Bricks MCP/Abilities layer can read this.

The relevant breakpoint context is exposed through the Bricks abilities. bricks/list-breakpoints returns whether custom breakpoints are enabled, whether the site is mobile-first, the base breakpoint key/width, and the active breakpoint list. The design context also includes this breakpoint information.

So an AI client that follows the Bricks workflow and reads the site context before editing can know that your site uses a mobile-first setup and should respect it when writing responsive Bricks settings.

The important caveat: do not assume every AI client will infer this automatically from the screenshot or from a generic prompt. At the start of a session, ask it to call bricks-start-here and then read the design context or list the breakpoints before making responsive edits.

If it writes raw CSS manually, explicitly tell it that your Bricks setup is mobile-first and that larger breakpoints should be treated as min-width breakpoints.

And most importantly: DON’T do this on your live installation. Clone the site locally or to a staging environment, and test it there.

1 Like

Thank you, good news! I will dig deep today! :slight_smile: