docs(skill): say what the reset leaves alone, and how a token takes alpha

[owjs3901]

Two things readers worked out the hard way, both from the same project. SKILL.md only — no package touched, so no changepack.

The reset leaves buttons alone, and nothing said so

@devup-ui/reset-css is a normalize, not a preflight. For form controls it does exactly two things:

':where(button,input,select)': { m: 0 },
':where(button,[type=button i],[type=reset i],[type=submit i])': {
  WebkitAppearance: 'button',
},

The second one preserves the native control appearance rather than removing it. padding, border and appearance are deliberately untouched.

That stays invisible until a button is sized in design units. Because box-sizing: border-box is global, an explicit 8px width cannot shrink below the 6 + 6 + 2 + 2 = 16px that Chrome's default padding: 1px 6px and border: 2px outset already occupy — so an 8×8 button from a design renders 16×8. The arithmetic predicts the reported number exactly.

Nothing is broken and no token is wrong; the reset never claimed those properties. The section now says so and shows the call-site fix.

A token at 40% has an answer already

The $token Scope section two paragraphs above already says a token is a CSS custom property — var(--token) is how you use one outside a JSX prop. So a token at partial opacity is color-mix() over it, with no alpha token to define and no copy of the colour to keep in sync:

<Box bg="color-mix(in srgb, var(--bg) 40%, transparent)" />

Not knowing that, a screen hardcoded #F7F3EC66 beside a $bg that was already the same colour. That is not merely redundant — $bg follows the active theme and the literal does not, so the surface stays light in dark mode. opacity is not a substitute either: it fades the element together with everything inside it, while color-mix() fades only the paint.

Note for devup-mcp

devup-mcp vendors this document into its binary, so devup_skills install writes it on machines with no network. Once this merges, node scripts/refresh-skills.mjs over there picks it up — I will follow with that PR.

[github-actions]

Changepacks

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
see 27 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.