Clickable card: div onClick versus anchor tag
WHAT IT TESTS: semantic HTML and accessibility judgment. OUTLINE: use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work.
Architecting multi-brand, dark-mode theming
WHAT IT TESTS: scalable theming architecture. OUTLINE: tier tokens into primitive, semantic, and component layers; components consume semantic tokens; themes swap by remapping semantic-to-primitive on a scope like data-theme.
Versioning and distributing token updates safely
WHAT IT TESTS: release discipline for shared tokens. OUTLINE: publish tokens as a semver package, bump major on breaking changes, deprecate before removing, communicate via changelogs and migration guides.
Transforming tokens for multiple platforms
WHAT IT TESTS: knowledge of token build pipelines. OUTLINE: a transformer like Style Dictionary parses JSON, applies platform transforms, and renders formatted outputs (CSS vars, Swift, Kotlin) via configured platforms.
What design tokens are and why they matter
WHAT IT TESTS: grasp of design tokens as a single source of truth. OUTLINE: tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates.
How BEM tames specificity and !important
WHAT IT TESTS: knowledge of scalable CSS architecture. OUTLINE: BEM names block, element, modifier as flat single classes, keeping specificity low and equal, removing the need for deep selectors and !important.
Performance concerns with the :has() selector
WHAT IT TESTS: understanding of selector matching cost. OUTLINE: :has() forces upward and forward style invalidation on DOM changes, broad subjects are costly; mitigate by scoping the subject, avoiding deep or universal arguments, and limiting dynamic…
Building a container-query-driven card component
WHAT IT TESTS: applied container query mechanics. OUTLINE: declare a wrapper container with container-type, query it with @container, restyle the card's internal grid by container width, optionally use cqi units.
Why Oklch beats HSL for color variations
WHAT IT TESTS: knowledge of perceptual color spaces. OUTLINE: HSL lightness is not perceptually uniform so equal steps look uneven, Oklch keeps perceived lightness consistent across hues, giving predictable hover and palette scales.
Styling a parent with the :has() selector
WHAT IT TESTS: understanding of relational selection. OUTLINE: :has() matches an element that contains or relates to a given selector, enabling upward styling; figure:has(figcaption) targets captioned figures.
When container queries beat media queries
WHAT IT TESTS: understanding of component-level responsiveness. OUTLINE: media queries react to viewport, container queries react to a parent's size, ideal for reusable components; set container-type on an ancestor then query it.
Native CSS nesting and the parent selector
WHAT IT TESTS: knowledge of native nesting syntax. OUTLINE: nest rules inside a block, descendant selectors combine implicitly, & references the parent and is required for compound or pseudo-class joins.
CSS logical properties versus physical properties
WHAT IT TESTS: awareness of writing-mode-aware layout. OUTLINE: logical properties map to flow direction not fixed sides, padding-inline-start follows text direction, benefit is automatic RTL and vertical support.
Declaring and scoping CSS custom properties
WHAT IT TESTS: understanding of custom property syntax and the cascade. OUTLINE: declare with --name, read with var(), :root makes it global while a class scopes it locally. RED FLAG: thinking they behave like compile-time Sass variables.
A federated design system governance model
WHAT IT TESTS: Scaling contribution via federation. OUTLINE: let the product team own the component as maintainers, with the core team setting standards, reviewing against a checklist, and owning the platform and tokens.
Driving and measuring design system adoption
WHAT IT TESTS: Strategy plus instrumentation for adoption. OUTLINE: lower friction with migration paths and great docs, incentivize over mandate, and measure adoption via package usage, component coverage, and code analysis.
Governance for design system contributions
WHAT IT TESTS: Designing a contribution and review process. OUTLINE: a clear intake and proposal step, review by core maintainers plus design, and criteria covering accessibility, API consistency, tokens, tests, and docs.
Classifying a Card change under SemVer
WHAT IT TESTS: Applying SemVer rules to a mixed change. OUTLINE: removing a prop is breaking so the whole release is major, document and migrate, and release the highest applicable level.
Documenting a single UI component
WHAT IT TESTS: Knowing what good component docs contain. OUTLINE: purpose and when to use, a props API table, live examples of variants and states, accessibility notes, and do and don't guidance. RED FLAG: documenting only the prop list with no usage guidance.
CI/CD pipeline for a design system monorepo
WHAT IT TESTS: Designing release automation for a monorepo. OUTLINE: install and cache, then parallel lint, type-check, unit and visual tests, then build, and on main a release job bumps versions and publishes. RED FLAG: publishing before tests pass.