A presentation at React Alicante 2025 in October 2025 in Alicante, Spain by Kathleen McMahon
Kathleen wearing a teal rain jacket on a rainy day at the beach.
Sandy path to the beach on a sunny morning.
Random beach drift artwork at sunrise on the beach.
Holding up a clam shell filled with various other shells at sunset by the shoreline.
A trio of clam shells filled with a variety of other shells on the wet sand at sunset.
A tiny sand dollar on the beach, with my foot on the sand to indicate size (shell smaller than my big toe).
A large clam shell half buried in the wet sand at low tide, waves slowly approaching.
A clam shell filled with a group of sand dollars, resting on a wet seaweed-encrusted series of rocks.
Holding up the first sand dollar of the season, sadly broken, with my fingers. Thanks, greenhead fly, for biting me.
A group on sand dollars nestled in a large clam shell on a sand dune in the afternoon.
Did I mention how excited I was to find the sand dollar? And how sad I was that I broke it?
My cats, Otis and Thor, sitting on the windowsill next to some moon shells on a warm spring afternoon.
A person wearing an inflatable T-rex costume joyfully does a forward flip off a dock into an inflatable raft floating in a pond.
A person attempting to line up a group of 10 wiggly kittens in a line. She was not successful.
O’Reilly — LaunchDarkly — Northwestern Mutual — Electronic Arts
Yes, I’m still sad about that broken sand dollar. Yet it reminds me of the fragility of design systems.
Hard-coded export type ThemeValues = | “katMeow” | “katPurr” | “katSqueak”;
—
Dynamically-generated
// This file is auto-generated // Do not edit manually
export const THEME_VALUES = [ “katMeow”, “katPurr”, “katSqueak”, “katHiss” ] as const;
export type Theme = typeof THEME_VALUES[number];
Untyped margin: var(—space-lgge);
—
Typed margin: ${theme.space.lg};
❌ MVPs / chaotic tokens (start clean first)
Styled Components → Strong TypeScript support
Before color: #0044cc; margin: 12px;
—
After color: ${theme.color.blue.primary}; margin: ${theme.space.md};
—
No drift → compiler enforces alignment
Styling + typing aligned
Low-contrast colors
Low-contrast colors With Types Flagged
Card: predictable shape → Interface
interface CardProps { title: string; children: React.ReactNode }
—
Alert: variant logic → Type
type AlertProps = { variant: “error” |… }
• type is more general • Avoids declaration merging • Reduces decision fatigue
A tiny sand dollar on the beach, with my foot on the sand to indicate size (shell smaller than my big toe).
• Shared props: title, description (interface) • Variant props: svg or photo (type union) • Combined: BaseMediaCardProps & VariantMediaCardProps
• Dev adds both svg + photoUrl • Dev adds aria-label to a photo • Docs skipped → misuse slips in
type VariantMediaCardProps = | { mediaType:”svg”; svg:ReactNode; “aria-label”:string; photoUrl?:never; alt?:never } | { mediaType:”photo”; photoUrl:string; alt:string; svg?:never; “aria-label”?:never }
• Forbids invalid combinations • Enforces correct accessibility attributes
<Button as=”a”>Link</Button>
<Link variant=”button”>About</Link>
A fish and fruit jello mold resting on a plate. Gross.
<Button as=”a”>Link</Button>
<Link variant=”button”>About</Link>
Successfully makes a jello-fish reference in presentation.
An older man smiles at the camera. The caption indicates the man is actually 26 years old
<Button as=”a”>Link</Button>
❌<Button as=”a”>Link</Button>
❌ <Link variant=”button”>About</Link>
✅ <Button>Click me</Button>
✅ <Link StyledAsButton />
✅ <a className=“btn”>Learn more</a>
(say it with me)
• Runtime: QA → Jira → patch → deploy • Compile-time: red squiggle → fixed pre-commit • Guardrails stop drift earlier
• Publish once, every app consumes • No local drift • Everyone aligned with latest design system
• Tokens prevent drift • Props prevent misuse • Compile-time confidence scales
A clam shell filled with a group of sand dollars, resting on a wet seaweed-encrusted series of rocks.
Still. Sad about that broken sand dollar.
Otis, the sleek black cat of wonder, playfully interrupts the sand dollar arrangement on my table.
