More in Design & UX — page 6
Purpose and key sections of CONTRIBUTING.md
WHAT IT TESTS: Whether you lower the barrier to good contributions. OUTLINE: It documents how to contribute; key sections are setup and dev workflow, contribution process and standards, and review and release expectations.
Deciding whether a one-off variant belongs in core
WHAT IT TESTS: Whether you guard the core against bloat. OUTLINE: Weigh reuse and consistency against maintenance cost, then decide with a shared-need bar and escape hatches for local cases. RED FLAG: Reflexively adding every requested variant to core.
Contributor workflow from proposal to merge
WHAT IT TESTS: Whether you know the end-to-end contributor path. OUTLINE: Proposal or RFC, design and core alignment, branch and build with tests and docs, review, then merge and release. RED FLAG: Opening a PR for a new component with no prior alignment.
Reversing stagnating design system adoption
WHAT IT TESTS: Whether you treat adoption as a product problem. OUTLINE: Find friction via interviews, reduce it with DX, codemods, and docs, then prove value with adoption and velocity metrics.
Building a design system quarterly roadmap
WHAT IT TESTS: Whether you prioritize with evidence, not opinion. OUTLINE: Combine usage and adoption data, support tickets, stakeholder interviews, and a debt ledger into a scored backlog with a deliberate debt allocation.
Designing a contribution model with quality gates
WHAT IT TESTS: Whether you can open contributions without losing quality. OUTLINE: Define a federated model, branch-and-PR flow, required reviews, and automated gates for tests, a11y, and visual regression.
Process for adding a new component
WHAT IT TESTS: Whether you have a repeatable intake-to-release process. OUTLINE: Triage need, design and spec, build with a11y and tests, document, version, and release. RED FLAG: Letting teams build one-offs with no review or shared ownership.
Core roles on a design system team
WHAT IT TESTS: Whether you see a design system as a product. OUTLINE: Name design, engineering, product/PM, and accessibility/docs roles with clear ownership. RED FLAG: Treating it as a side project with no dedicated owners.
Shadow DOM accessibility: focus and cross-boundary ARIA
WHAT IT TESTS: Shadow DOM a11y limits. OUTLINE: IDREF ARIA can't cross the shadow boundary, so aria-labelledby and aria-activedescendant break; delegatesFocus and ElementInternals/ARIAMixin help. RED FLAG: assuming ARIA id references work across shadow roots.
Adapting CSS for Forced Colors Mode
WHAT IT TESTS: supporting forced-colors accessibility. OUTLINE: use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly. RED FLAG: ignoring it, or assuming background images and box-shadows still convey state.
Accessible toasts with ARIA live regions
WHAT IT TESTS: announcing dynamic content without moving focus. OUTLINE: a persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount. RED FLAG: moving focus to the toast or creating the region at announce time.
Enforcing an accessible name on icon-only buttons
WHAT IT TESTS: API design that guarantees an accessible name. OUTLINE: require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden. RED FLAG: trusting developers to remember a label on icon buttons.
ARIA roles and keyboard nav for a Tabs component
WHAT IT TESTS: the tabs ARIA pattern. OUTLINE: tablist, tab, tabpanel roles with aria-selected and aria-controls; arrow keys move tabs, Tab moves to the panel via roving tabindex. RED FLAG: making every tab a Tab stop or omitting aria-selected.
Enforcing WCAG color contrast programmatically
WHAT IT TESTS: preventing failing color pairings by design. OUTLINE: pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI. RED FLAG: trusting developers to eyeball contrast manually.
Managing keyboard focus in an accessible Modal
WHAT IT TESTS: focus management for dialogs. OUTLINE: move focus in on open, trap Tab inside, close on Escape, restore focus to the trigger on close. RED FLAG: leaving focus behind the modal so Tab escapes to the page.
Minimizing library bundle-size impact on consumers
WHAT IT TESTS: controlling bundle cost at scale. OUTLINE: track size in CI with size-limit, support granular imports, externalize peers, lazy-load heavy parts, audit with bundle analyzers. RED FLAG: relying on tree-shaking alone with no measurement.
Building a visual regression testing pipeline
WHAT IT TESTS: scalable visual diffing. OUTLINE: snapshot Storybook stories per PR, freeze nondeterminism, set diff thresholds, manage baselines via approvals. RED FLAG: pixel-perfect diffs with no flake control or baseline workflow.
Syncing design tokens from Figma to code
WHAT IT TESTS: a tokens pipeline with a single source of truth. OUTLINE: export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI. RED FLAG: manually copying hex values by hand.
Bundling a library for tree-shaking and multiple formats
WHAT IT TESTS: library-mode bundler config. OUTLINE: externalize peers, emit ESM and CJS, preserve modules for tree-shaking, set sideEffects false, ship types. RED FLAG: bundling peers or shipping a single minified CJS blob.
Releasing a breaking change without forcing upgrades
WHAT IT TESTS: managing breaking changes under semver. OUTLINE: ship a major bump, keep the old major published, document migration, automate with Changesets. RED FLAG: hiding a breaking change in a patch or force-upgrading everyone.