For AI agents: llms.txt is a short guide that sends you to the rules your problem needs, and rules.json holds every rule of this playbook as JSON.

How to do it

When a script selects .order-card-button, renaming the class for styling silently breaks the behaviour. Give the element a hook such as data-action="add-to-basket". State attributes from Show state through attributes are the exception, because both sides read them on purpose.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

HTML example

<button class="order-card-button" data-action="add-to-basket" data-product="rye-loaf">Add to basket</button>

JavaScript example

document.addEventListener('click', event => {
  const button = event.target.closest('[data-action="add-to-basket"]');
  if (button) addToBasket(button.dataset.product);
});

Python example

# Build check: scripts never select by class
import pathlib, re, sys
CLASS_QUERY = re.compile(r"(querySelector(All)?|closest)\(\s*['\"][^'\"]*\.[a-z]")
hits = [f"{p}:{n}" for p in pathlib.Path("src").rglob("*.js")
        for n, line in enumerate(p.read_text().splitlines(), 1) if CLASS_QUERY.search(line)]
print("\n".join(f"FAIL {hit} selects by class" for hit in hits))
sys.exit(1 if hits else 0)

How to check

A search of the scripts finds 0 querySelector or closest calls with a class selector. A search of the stylesheets finds 0 selectors on data-action.

Related rules

• Show state through attributes in HTML and CSS