Common incorrect uses of <mds-price-table-header>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use Outside <mds-price-table>

<mds-price-table-header> is a structural child of <mds-price-table>. Used standalone it still lays out its columns, but it is cut off from the feature matrix it is meant to align with: <mds-price-table> is what stacks the header above the feature rows.

<!-- INCORRECT -->
<mds-price-table-header class="tablet:grid-cols-3">
  <mds-price-table-list>...</mds-price-table-list>
</mds-price-table-header>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-header class="tablet:grid-cols-3">
    <mds-price-table-list>...</mds-price-table-list>
  </mds-price-table-header>
</mds-price-table>

Do Not Add Extra Wrapper Elements Around Plan Columns

The auto-fit grid counts direct children; adding <div> wrappers around plan cards breaks the equal-column distribution and misaligns the header with feature rows.

<!-- INCORRECT -->
<mds-price-table-header class="tablet:grid-cols-3">
  <div class="plans">
    <mds-price-table-list>...</mds-price-table-list>
    <mds-price-table-list>...</mds-price-table-list>
  </div>
</mds-price-table-header>

<!-- CORRECT -->
<mds-price-table-header class="tablet:grid-cols-3">
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
</mds-price-table-header>

Do Not Set Column Layout With Inline Styles

The column count is expressed through Magma utility classes, not inline style attributes. Inline styles bypass the responsive utility cascade and are impossible to override with breakpoint tokens.

<!-- INCORRECT -->
<mds-price-table-header style="grid-template-columns: 1fr 1fr 1fr;">
  ...
</mds-price-table-header>

<!-- CORRECT -->
<mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
  ...
</mds-price-table-header>

Do Not Mismatch Column Count Between Header and Feature Section

Each <mds-price-table-features-row> divides its width equally among its cells, while the header lays its children on its grid columns. If a feature row has fewer or more cells than the header has columns, plan columns do not line up. Grid-column classes on <mds-price-table-features> change nothing: it renders a table.

<!-- INCORRECT: header has 4 columns, each feature row has 3 cells -->
<mds-price-table>
  <mds-price-table-header class="desktop:grid-cols-4">
    <mds-text typography="h1">Piani</mds-text>
    <mds-price-table-list>...</mds-price-table-list>
    <mds-price-table-list>...</mds-price-table-list>
    <mds-price-table-list>...</mds-price-table-list>
  </mds-price-table-header>
  <mds-price-table-features>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

<!-- CORRECT: one label cell plus one cell per plan, as many as the header columns -->
<mds-price-table>
  <mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
    <mds-text typography="h1" class="tablet:col-span-3 desktop:col-span-1">Piani</mds-text>
    <mds-price-table-list>...</mds-price-table-list>
    <mds-price-table-list>...</mds-price-table-list>
    <mds-price-table-list>...</mds-price-table-list>
  </mds-price-table-header>
  <mds-price-table-features>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">Illimitati</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Do Not Place Non-Plan Content in the Header Without a Spanning Utility

The component places every direct child in its own equal-width column. A leading title or label that should span multiple columns must carry the appropriate col-span utility; without it, it shrinks to one narrow column and pushes the plan cards out of alignment.

<!-- INCORRECT: leading title takes one column, disrupting plan alignment -->
<mds-price-table-header class="desktop:grid-cols-4">
  <mds-text typography="h1">Scegli il piano</mds-text>
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
</mds-price-table-header>

<!-- CORRECT: on tablet the title spans the full row; on desktop it takes one column -->
<mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
  <mds-text
    typography="h1"
    class="tablet:col-span-3 desktop:col-span-1 desktop:py-600"
  >
    Scegli il piano
  </mds-text>
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
  <mds-price-table-list>...</mds-price-table-list>
</mds-price-table-header>