feat(skills): Add migrate-container-queries skill

[priscilawebdev]

Adds the migrate-container-queries skill guiding the migration of viewport media queries (@media, useMedia) to container queries in Sentry's frontend, backing the Design Engineering container-query migration project (DE-1368). It's a single inline SKILL.md plus a SPEC.md maintenance contract.

[sentry]

Bug: The Rung 1 migration example incorrectly maps breakpoints.sm to container.sm. It should map by pixel value to the nearest container breakpoint, container.xl.
_{Severity: MEDIUM}

Suggested Fix

Update the example to reflect the correct mapping based on pixel values. The code direction={{xs: 'column', sm: 'row'}} should be changed to direction={{zero: 'column', xl: 'row'}} to correctly map the original breakpoints.sm (800px) to the nearest container breakpoint (container.xl at 768px).

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: skills/migrate-container-queries/SKILL.md#L72-L75

Potential issue: The Rung 1 migration example in the documentation incorrectly maps a
viewport breakpoint to a container breakpoint. It maps `breakpoints.sm` (800px) to the
`sm` container key, which corresponds to 512px. This contradicts the guide's own rule to
map by pixel value, not by key name. The correct mapping for the original 800px
breakpoint is `container.xl` (768px). This incorrect example could lead developers to
introduce responsive bugs into their components.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[sentry]

Bug: The useMedia migration example incorrectly replaces a max-width: 800px check with breakpoint === 'zero', which is only true below 320px, inverting the responsive logic.
_{Severity: MEDIUM}

Suggested Fix

The example should be corrected to check if the current container breakpoint is below the equivalent of the original 800px viewport breakpoint. The logic should check if the active breakpoint is smaller than 'xl' (768px), which is the nearest container token to the original 800px boundary.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: skills/migrate-container-queries/SKILL.md#L98-L100

Potential issue: The Rung 3 example for migrating `useMedia` incorrectly replaces a
check for screen width less than 800px (`useMedia('(max-width: breakpoints.sm)')`) with
a check for `breakpoint === 'zero'`. The `'zero'` container breakpoint only applies when
the container width is less than 320px. This fundamentally changes the responsive logic,
causing the `isNarrow` condition to be `false` for most realistic container sizes,
whereas it was previously `true` for a wide range of widths up to 800px.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[natemoo-re]

@priscilawebdev since this is sentry-repo specific, it can go in the sentry repo directly (see getsentry/sentry#120108 for a recent example)

If it only makes sense in one repo, keep it in that repo

• https://github.com/getsentry/skills#where-skills-belong

[priscilawebdev]

@priscilawebdev since this is sentry-repo specific, it can go in the sentry repo directly (see getsentry/sentry#120108 for a recent example)

If it only makes sense in one repo, keep it in that repo

• https://github.com/getsentry/skills#where-skills-belong

Omg! That is very true. thank you!