More in Design & UX — page 7
Monorepo vs polyrepo for a design system
WHAT IT TESTS: repo architecture trade-offs. OUTLINE: atomic cross-package changes and shared tooling versus build orchestration, caching, and versioning complexity. RED FLAG: blanket pro or anti stance ignoring release and CI implications.
CSS-in-JS vs pre-compiled CSS for distribution
WHAT IT TESTS: styling distribution trade-offs. OUTLINE: runtime cost and dynamic theming of CSS-in-JS versus cacheability and SSR simplicity of static CSS. RED FLAG: declaring one universally better with no mention of runtime or caching.
Storybook's role in design system infrastructure
WHAT IT TESTS: why a component explorer matters. OUTLINE: isolated development, living documentation, visual and interaction testing, shared review surface. RED FLAG: describing it only as a dev playground with no testing or docs value.
Publishing a component to a private NPM registry
WHAT IT TESTS: the packaging-to-publish workflow. OUTLINE: configure package.json fields and scoped name, build dist, set registry auth, npm publish with access restricted. RED FLAG: forgetting the build step or shipping raw source.
Measuring design system documentation effectiveness
WHAT IT TESTS: outcome metrics over vanity page views. OUTLINE: search-with-no-results, time-to-first-component, support-ticket deflection, tied to analytics and registry data. RED FLAG: citing only page views or NPS with no instrumentation.
Documenting component anti-patterns and don'ts
WHAT IT TESTS: guiding correct usage by showing failure modes. OUTLINE: paired do/don't examples, explain the why, enforce with lint rules. RED FLAG: vague prose warnings with no concrete counter-example or guardrail.
Auto-generating component API docs from source
WHAT IT TESTS: keeping prop docs in sync with code. OUTLINE: extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc. RED FLAG: maintaining a hand-written prop table that silently drifts.
Structuring Storybook stories for visual states
WHAT IT TESTS: organizing component documentation in an explorer. OUTLINE: one named story per state with explicit args, plus argTypes and controls. RED FLAG: dumping every state into one story with manual prop toggling.
Designing a multi-step wizard form pattern
WHAT IT TESTS: orchestrating multi-step flow plus per-step state. OUTLINE: a wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps.
Architecting a composable DataTable API
WHAT IT TESTS: avoiding prop-bloat in a complex component. OUTLINE: separate a headless data/state core from rendering, use a column-definition config with custom cell renderers, expose composition over dozens of flags.
The slots pattern for a PageLayout component
WHAT IT TESTS: named composition regions. OUTLINE: slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents.
Decoupling Form state from its Field components
WHAT IT TESTS: shared form state without coupling. OUTLINE: Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field. RED FLAG: the Form enumerating every specific field it contains.
Designing a Modal with controlled open state
WHAT IT TESTS: controlled state plus content injection. OUTLINE: parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.
Designing a responsive Grid with breakpoint props
WHAT IT TESTS: abstracting responsive CSS behind a clean API. OUTLINE: accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop. RED FLAG: leaking raw media-query CSS to every consumer.
Building a flexible Card with optional content
WHAT IT TESTS: flexible component APIs via props or composition. OUTLINE: use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering.
Composing Input and Button into a SearchForm
WHAT IT TESTS: basic composition and component API design. OUTLINE: wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled. RED FLAG: duplicating Input and Button logic instead of reusing them.
Headless components and a headless Combobox
WHAT IT TESTS: separating behavior from presentation. OUTLINE: a headless component owns state, logic, and accessibility but renders no UI, exposing state and prop-getters so consumers supply markup.
Architecting global and local theming with context
WHAT IT TESTS: layered theming via context. OUTLINE: a top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables. RED FLAG: passing theme through props at every level.
Choosing a spacing scale for a design system
WHAT IT TESTS: turning spacing into a consistent system. OUTLINE: a numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them. RED FLAG: free-form pixel values with no scale or rationale.
Component Stability Index
A component stability index is a maturity signal that tells consumers how safe a design-system component is to use, from experimental to stable to deprecated, setting expectations about API churn and supporting confident adoption decisions.