Frontend architect skill list
Akshay Shinde laid out a practical skills map for Frontend Architects—state management (Zustand/Jotai), Core Web Vitals performance, micro-frontends, Next.js strategies, TypeScript tooling like Turborepo, and observability with Sentry. The list frames the recurring debates frontend teams have about where to invest for scale and maintainability. (x.com)
A frontend architect is usually the person who decides where state lives, how pages load, and how five teams avoid breaking each other on Friday. Akshay Shinde’s skill map landed because it points at the arguments big frontend teams actually have in 2026, not a generic list of frameworks. (akshayshinde.com) State management is one of those arguments because every React app starts simple and then turns into a kitchen with drawers full of duplicated data. Zustand describes itself as a small, fast, scalable state-management solution, which is why teams reach for it when they want one central store without a lot of ceremony. (docs.pmnd.rs) Jotai solves a slightly different problem by breaking state into “atoms,” which are tiny pieces that update only the components that depend on them. The Jotai docs say this bottom-up model helps avoid extra re-renders that often show up with broad React context patterns. (jotai.org) Performance sits on the same list because users do not experience “clean architecture,” they experience a page that loads late or jumps under their thumb. Google’s Core Web Vitals focus that pain into three measurements: Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness, and Cumulative Layout Shift for visual stability. (web.dev) Those numbers are not abstract scorecards. Google defines “good” as Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1 at the 75th percentile of page loads. (web.dev) Next.js shows up in these debates because it changes where the work happens. Its `useReportWebVitals` hook lets teams send real user performance data to analytics tools, which turns “the site feels slow” into a trace with a page, metric, and timestamp attached. (nextjs.org) Micro-frontends are the org-chart version of frontend architecture: instead of one giant app, different teams ship different slices. Vercel says the pattern is useful for independent teams and incremental migration, but the same docs warn that micro-frontends add development complexity. (vercel.com) That warning is why Turborepo sits next to micro-frontends instead of below them. Vercel describes Turborepo as a build system for monorepos with fast incremental builds, content-aware hashing, and remote caching, which is a fancy way of saying one engineer can change the billing app without rebuilding the marketing site from scratch. (vercel.com) TypeScript belongs on the architect list for the same reason city planners care about street signs: once the system gets big, ambiguity gets expensive. The TypeScript docs say project references split programs into smaller pieces to improve build times, enforce logical separation, and speed up editor work in large codebases. (typescriptlang.org) Observability is the last piece because production failures rarely arrive as neat bug reports. Sentry’s Next.js guide is built around capturing errors, logs, and traces, which gives teams a way to connect a broken checkout button to the release, route, and user session that triggered it. (sentry.io) Put together, that skill list reads less like a curriculum and more like a map of tradeoffs. One team picks Jotai because atom-level updates keep dashboards calm, another picks Zustand because a single store is easier to teach, and both still have to hit Core Web Vitals, keep Next.js measurable, and decide whether micro-frontends are worth the extra moving parts. (jotai.org) (docs.pmnd.rs) (web.dev) (vercel.com)