Interview questions in Design Systems, page 2
Architecting global and local theming with context
A top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables.
Headless components and a headless Combobox
A headless component owns state, logic, and accessibility but renders no UI, exposing state and prop-getters so consumers supply markup.
Composing Input and Button into a SearchForm
Wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled.
Building a flexible Card with optional content
Use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering.
Designing a responsive Grid with breakpoint props
Accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop.
Designing a Modal with controlled open state
Parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.
Decoupling Form state from its Field components
Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field.
The slots pattern for a PageLayout component
Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents.
Architecting a composable DataTable API
Separate a headless data/state core from rendering, use a column-definition config with custom cell renderers, expose composition over dozens of flags.
Designing a multi-step wizard form pattern
A wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps.
Structuring Storybook stories for visual states
One named story per state with explicit args, plus argTypes and controls.
Auto-generating component API docs from source
Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc.
Documenting component anti-patterns and don'ts
Paired do/don't examples, explain the why, enforce with lint rules.
Measuring design system documentation effectiveness
Search-with-no-results, time-to-first-component, support-ticket deflection, tied to analytics and registry data.
Publishing a component to a private NPM registry
Configure package.json fields and scoped name, build dist, set registry auth, npm publish with access restricted.
Storybook's role in design system infrastructure
Isolated development, living documentation, visual and interaction testing, shared review surface.
CSS-in-JS vs pre-compiled CSS for distribution
Runtime cost and dynamic theming of CSS-in-JS versus cacheability and SSR simplicity of static CSS.
Monorepo vs polyrepo for a design system
Atomic cross-package changes and shared tooling versus build orchestration, caching, and versioning complexity.
Releasing a breaking change without forcing upgrades
Ship a major bump, keep the old major published, document migration, automate with Changesets.
Bundling a library for tree-shaking and multiple formats
Externalize peers, emit ESM and CJS, preserve modules for tree-shaking, set sideEffects false, ship types.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles