A SaaS team had Storybook, Figma tokens and a dedicated Slack channel, and still shipped one-off CSS for every feature. Strict linting made it worse. A contribution bridge is what finally moved them.
One WooCommerce stylesheet had twelve @keyframes definitions for a single fade-in, spelled three different ways. Here is the tokens file that replaced them, and how reduced-motion support fits in at the token level.
A client’s WooCommerce site shipped a JavaScript bundle whose main job was resizing a textarea. field-sizing does it in one line. Here are the modern CSS features that are baseline now, and the code they let you delete.
Console logging the Gamepad API at 60 frames per second tells you nothing useful. Here is the visual debugger I built instead, with its styles isolated in a CSS cascade layer so they stop fighting the theme.
CSS still has no :nth-letter selector, so letter-by-letter text effects mean splitting a header into spans, which screen readers then read out one letter at a time. Here is the ARIA markup and the PHP helper that avoid that.
A client kept flagging link underlines that ran a couple of pixels past the letters. The CSS property text-decoration-inset clips them without pseudo-element hacks, and it animates on hover. Firefox only for now.
A Meet the Team row of overlapping avatars broke every time the client added a person. Here is the CSS that works out the negative margin itself, using sibling-count() and container query units.
A JavaScript library added for smooth page transitions hijacked every internal link on a WooCommerce store. Pulling it out and using View Transitions, namespaced classes and accessibility tokens fixed more than it broke.