A performance budget check, as CI would run it
Each failure points to a design fix: /product/42 needs a smaller, prioritised hero image with reserved space (LCP and CLS); /dashboard needs code splitting and transitions for heavy chart updates (JS and INP). The result is text plus colour, never colour alone.
Some requirements touch every screen: performance budgets tied to Core Web Vitals, accessibility to WCAG 2.2 AA, localisation for many languages and directions, security boundaries (XSS, CSP, auth), and observability; deciding them at design time is cheap, retrofitting them is not, so bring the same checklist to every design.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a fonts limit of 2 to the budget example and a fonts value for each route; make /feed use 3 fonts.
Add hi-IN (Hindi) to the locale example with English-like plural forms, and check how the price is formatted.
Explain it without notes
What are Core Web Vitals, their "good" thresholds, and how do they shape a frontend design?
Which accessibility requirements would you write into a frontend design?
How do you prepare a React app for many languages, including right-to-left?
Where are the security boundaries in a React frontend, and what do you put in the design doc?
What would you monitor after launching a new frontend feature?
Preview
Console
Nothing logged yet.Expected console output
/feed: pass
/product/42: FAIL lcpMs 3100 > 2500, cls 0.18 > 0.1, lcpImageKb 240 > 100
/dashboard: FAIL inpMs 260 > 200, jsKb 210 > 170