Why the rulebook exists

These rules are machine-checked

Section writes are validated before they are saved. A violation rejects the write with HTFLOW_WEBFLOW_RULES_VIOLATED and the section is not stored — whether the write came from the built-in agent, an MCP client, or a direct canvas edit.

They are compatibility rules, not design rules

Nothing here constrains how a page looks. The rules govern mechanics — which CSS properties, which selectors, which breakpoints, how JavaScript finds elements. The design is whatever you asked for.

The absolute prohibitions

These never pass, in any section:

• CSS frameworks (Tailwind, Bootstrap) or JS libraries (jQuery, React, GSAP). Vanilla only.
• CSS shorthand. The one exception is overflow, which stays shorthand.
• background-image for imagery — use an <img> positioned absolutely.
• Pseudo-elements: ::before, ::after, ::first-line, ::marker. Pseudo-classes are fine and in fact required.
• External CSS/JS files or CDN dependencies.
• Breakpoints other than 991px, 767px and 479px.
• Class or id selectors in JavaScript, and getElementById / getElementsByClassName / getElementsByTagName.
• var, and function declarations — const/let and arrow functions only.
• Emoji characters. Inline SVG instead.
• ul/li lists — use div-based flex or grid layouts.
• Inline event handlers (onclick, onload, onerror) and inline styles, except ones JavaScript sets at runtime.

The mandatory requirements

• data-ht-* attributes for all DOM selection.
• Longhand CSS properties, always.
• Every styled element gets its own descriptive class name.
• Semantic HTML with real alt and aria-* attributes.
• Modern ES6+ JavaScript.
• grid-template-rows: 1fr wherever grid-template-columns is used.
• :hover and :focus-visible states on every interactive element.

The rules in detail

Reading the rulebook from an agent

Any MCP client can fetch the enforced text itself with get_flow_webflow_rules, so an agent can be handed the current rules rather than a copy that has drifted.