design-gate git:20260806.cbbe9d3A

Immutable. This exact content is served forever at /api/v1/blob/2136661d58d52495.

---
name: design-gate
description: Use when a request could alter layout, markup, component behavior, styling, typography, navigation, responsive behavior, or animation.
---

# Design gate

## Overview

Prevent content work from changing the frozen production design.

## When to Use

Use before touching a Vue template, component, SCSS, Tailwind class, layout
value, breakpoint, navigation rule, control, or animation.

## When NOT to Use

Do not use for content-only changes that stay in documented data surfaces.

## Core Process

1. Identify the exact file and visual surface.
2. Stop unless the user explicitly approved design work.
3. Record the approved scope.
4. Verify desktop and mobile behavior in a browser.
5. Run the relevant validation.

Do not shrink type, alter spacing, change markup, or change timing to make
supplied content fit.

For a visual size or collision request, assert the affected elements'
`getBoundingClientRect()` values in the browser. CSS dimensions alone are not
proof of the rendered result because containing blocks and responsive rules can
constrain them.

For isolated overlay copy, use a classed element instead of a bare semantic tag
when the site has global element styling. A global `footer` rule can introduce
panel paint, stacking, or padding that defeats component-scoped styles.

For desktop-only decorative labels adjacent to the fixed media widget, position
them relative to the widget and hide them at the desktop breakpoint. Measure
both label bounds and the widget before approving the layout.

## Common Rationalizations

- "The CSS width is larger, so the rendered element must be larger." A grid,
  flex item, transform, or containing block can still constrain it; measure
  the rendered bounds.
- "A local build proves the visual change." Builds do not expose overlaps,
  clipping, or viewport-bound failures; check the affected route in a browser.

## Red Flags

- "Small" spacing or typography changes without approval.
- Component edits made to solve a content request.
- A visual change verified only by a build.

## Verification

- [ ] Explicit approval predates the edit.
- [ ] Diff stays inside the approved surface.
- [ ] Desktop and mobile browser checks pass.
- [ ] No unrelated design file changed.

## References

- `../../reference/wolves-runtime.md`
- `../validation/SKILL.md`