Common incorrect uses of <mds-author>. 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 Put Plain Text Directly in the Default Slot

The default slot is a grid container designed for structured elements like mds-text. Bare text nodes render without typography tokens, scale inconsistently, and cannot be truncated reliably.

<!-- INCORRECT -->
<mds-author>
  <mds-avatar slot="avatar" initials="lr"></mds-avatar>
  Luca Rossi
  Redattore
</mds-author>

<!-- CORRECT -->
<mds-author>
  <mds-avatar slot="avatar" initials="lr"></mds-avatar>
  <mds-text typography="h6">Luca Rossi</mds-text>
  <mds-text typography="caption">Redattore</mds-text>
</mds-author>

Do Not Place the Avatar in the Default Slot

Assigning an mds-avatar without slot="avatar" puts it in the text/info region. The component only wires up the two-column layout when a child is assigned to the named avatar slot.

<!-- INCORRECT -->
<mds-author>
  <mds-avatar initials="ab"></mds-avatar>
  <mds-text typography="h6">Anna Bianchi</mds-text>
</mds-author>

<!-- CORRECT -->
<mds-author>
  <mds-avatar slot="avatar" initials="ab"></mds-avatar>
  <mds-text typography="h6">Anna Bianchi</mds-text>
</mds-author>

Do Not Inline an <img> Instead of mds-avatar

Using a raw <img> in the avatar slot skips the image-load error handling (a person glyph replaces a broken image), the loading placeholder, and the consistent sizing that mds-avatar provides.

<!-- INCORRECT -->
<mds-author>
  <img slot="avatar" src="/assets/foto.jpg" alt="Foto autore" />
  <mds-text typography="h6">Paolo Neri</mds-text>
</mds-author>

<!-- CORRECT -->
<mds-author>
  <mds-avatar slot="avatar" src="/assets/foto.jpg" initials="pn"></mds-avatar>
  <mds-text typography="h6">Paolo Neri</mds-text>
</mds-author>

Do Not Force Layout via Inline Styles

<mds-author> manages its own flex and container-query layout. Overriding display, flex-direction, or align-items on the host breaks the responsive collapse at narrow widths.

<!-- INCORRECT -->
<mds-author style="flex-direction: column; align-items: flex-start;">
  <mds-avatar slot="avatar" initials="sv"></mds-avatar>
  <mds-text typography="h6">Sara Vitale</mds-text>
</mds-author>

<!-- CORRECT -->
<!-- Constrain the parent container width to let the built-in container query handle the collapse -->
<div style="width: 160px;">
  <mds-author>
    <mds-avatar slot="avatar" initials="sv"></mds-avatar>
    <mds-text typography="h6">Sara Vitale</mds-text>
  </mds-author>
</div>

Do Not Use <mds-author> as a Generic Flex Row

<mds-author> is specifically designed for author bylines. For other avatar-plus-text combinations (entity cards, mention chips, user list rows) use mds-entity or mds-mention instead.

<!-- INCORRECT - using mds-author to display a product or file entry -->
<mds-author>
  <mds-avatar slot="avatar" icon="mi/baseline/folder"></mds-avatar>
  <mds-text typography="h6">Documento strategico.pdf</mds-text>
  <mds-text typography="caption">1.2 MB</mds-text>
</mds-author>

<!-- CORRECT -->
<mds-entity icon="mi/baseline/folder">
  <mds-text typography="h6">Documento strategico.pdf</mds-text>
  <mds-text slot="detail" typography="caption">1.2 MB</mds-text>
</mds-entity>