| 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
- Identify the exact file and visual surface.
- Stop unless the user explicitly approved design work.
- Record the approved scope.
- Verify desktop and mobile behavior in a browser.
- 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
References
../../reference/wolves-runtime.md../validation/SKILL.md
