Tech Tree · Engineering
Frontend Maturity
Evolve your frontend engineering practice from jQuery-era scripts to a full design system with measurable performance and first-class accessibility. Each node represents a concrete capability with steps, effort estimates, and the dependencies that reflect real-world frontend progression.
Maturity tiers
jQuery
Vanilla JS and jQuery handle interactivity. CSS is global and fragile. Deployment is manual. Consistency depends on individuals, not systems.
SPA
A modern JS framework (React, Vue, Svelte) drives the UI. Builds are automated. Teams ship features with component-level encapsulation.
Component Library
Shared components are extracted into an internal library. Visual consistency, accessibility, and test coverage are enforced at the component level.
Design System
A living design system governs tokens, components, patterns, and principles. Design and engineering speak the same language and ship faster together.
Tracks
Framework
The tools, libraries, and patterns used to build and organise UI code.
Design System
Shared visual language, components, and guidelines that ensure consistency.
Performance
How fast the UI loads, responds to interaction, and performs on constrained devices.
Accessibility
How well the UI serves users with disabilities and meets legal WCAG obligations.
All capabilities (16)
jQuery
CSS Methodology
A consistent CSS naming convention (BEM, CSS Modules, or utility-first) prevents global selector conflicts, reduces specificity wars, and makes styles predictable to change.
css · bem · tailwind · methodology
Module Bundler
JavaScript is bundled by a modern build tool (Vite, webpack, esbuild) rather than concatenated by hand or loaded as individual script tags. This is the foundation for tree-shaking, code splitting, and fast local development.
bundler · vite · webpack · foundation
Performance Baseline
Current load and interactivity performance is measured and documented. You cannot improve what you do not measure, and regressions cannot be caught without a baseline.
performance · lighthouse · core-web-vitals · measurement
Semantic HTML
HTML conveys document structure and meaning through correct element choice. Semantic markup is the most cost-effective accessibility improvement — it costs nothing extra and benefits screen readers, SEO, and keyboard users simultaneously.
accessibility · semantic-html · a11y · wcag
SPA
Bundle Optimisation
JavaScript bundle size is actively managed through code splitting, lazy loading, and dependency auditing. Smaller bundles mean faster LCP and lower data costs for users.
bundle · code-splitting · performance · webpack
CSS Framework
A utility-first or component CSS framework (Tailwind, Bootstrap) provides a consistent visual language with a low configuration cost. Designers and engineers share the same vocabulary.
tailwind · css-framework · design
Keyboard Navigation
Every interactive element is reachable and operable by keyboard. Focus management during navigation and modals is explicit. Focus is never lost or trapped unintentionally.
keyboard · focus · a11y · wcag
React / Vue Adoption
A component-based JS framework is adopted for all new UI development. Components encapsulate markup, styles, and behaviour — eliminating jQuery-era global state and DOM manipulation.
react · vue · framework · components
Component Library
Automated Accessibility Testing
Axe-core or Playwright accessibility assertions run in CI on every pull request. Automated tools catch ~35% of WCAG issues, eliminating the most common regressions before review.
accessibility · axe · automated-testing · ci
Core Web Vitals Optimisation
LCP, INP, and CLS meet Google's "Good" thresholds for at least 75% of real users. Core Web Vitals are a direct ranking signal and a strong proxy for user experience quality.
core-web-vitals · lcp · inp · cls · performance
Design Tokens
Colour, spacing, typography, and motion values are defined as named tokens shared between design tools (Figma) and code. A token change propagates everywhere automatically.
design-tokens · figma · css-variables · theming
Internal Component Library
Common UI components (buttons, forms, modals, data tables) are extracted into a versioned, internally published package. Teams consume the library rather than re-implementing components.
component-library · storybook · npm · design-system
Design System
Design System Governance
The design system has a dedicated team or guild, a contribution model, a versioned changelog, and an adoption roadmap. A design system without governance becomes stale within six months.
design-system · governance · contribution · process
Performance Budget
Formal performance budgets are enforced in CI: total JS, CSS, image payload, and Lighthouse scores are capped. Exceeding a budget requires an explicit decision, not an accidental regression.
performance-budget · lighthouse · ci · governance
Visual Regression Testing
Pixel-level or structural snapshots of every component are compared on each PR. Visual regressions in shared components are caught before they affect users in production.
visual-regression · chromatic · storybook · testing
WCAG 2.1 AA Compliance
The product meets WCAG 2.1 AA across all criteria, verified by a combination of automated scanning, manual keyboard testing, and screen-reader testing. Compliance is maintained, not achieved once.
wcag · accessibility · a11y · compliance · screen-reader