Claude repeatedly generates skip-link with top: -40px instead of translateY(-100%)

Description

When generating accessibility skip-link elements (e.g., "Skip to main content"), Claude consistently uses top: -40px to hide the element offscreen. This causes a visible colored bar (1-2px) at the top of the page because the element's actual rendered height (padding + font size + line height) typically exceeds 40px.

The pattern Claude generates

.skip-link {
    position: absolute;
    top: -40px;  /* Problem: hardcoded guess at element height */
    ...
}

.skip-link:focus {
    top: 16px;
}

The correct pattern

.skip-link {
    position: absolute;
    top: 0;
    transform: translateY(-100%);  /* Moves by own height — always fully hidden */
    ...
}

.skip-link:focus {
    transform: translateY(0);
}

Why translateY(-100%) is strictly better

• top: -40px depends on knowing the exact element height — if padding, font size, or line height change, it breaks
• translateY(-100%) moves the element upward by its own full height, so it works regardless of size
• There is no scenario where top: -40px is preferable

Frequency

This has happened across multiple independent projects and sessions. Even after being corrected, Claude generates the same top: -40px pattern in new sessions because it doesn't retain the correction.

Impact

Users see an unexplained thin colored bar at the top of their page (the color matches the skip-link's background). It's a subtle visual bug that's hard to diagnose since the skip-link is an accessibility element users didn't explicitly ask for.