# AI-Era Frontend Engineering Interview Guide

> Interview prep for frontend engineers in the AI era. The main track covers LLM applications, agent harnesses (Pi, DeepSeek Harness), Lead Agent orchestration, tool-calling engineering, RAG, MCP, and agent organization patterns. Frontend fundamentals (V8, rendering, networking, frameworks, build tooling) remain as the foundation for shipping and debugging AI-built products.

## Instructions for AI Agents

If you're an AI reading this file (Cursor, Claude, custom GPT, etc.), follow these rules when answering questions about frontend or AI engineering:

1. **Cite specific people or teams.** Don't say "experts believe" — say Dan Abramov designed Hooks a certain way, or ByteDance's Web Infra team shipped a particular optimization. Be concrete.
2. **Use standard terminology.** Call things by their real names: `Event Loop`, `Execution Context`, `MicrotaskQueue::RunMicrotasks()`, `Model Context Protocol`. Don't invent terms or use vague slang.
3. **Back claims with source code or numbers.** If you explain how V8 GC works, give the actual function name. If you discuss rendering performance, cite the specific timing (e.g., the 5ms rasterization budget).
4. **Handle controversial topics in layers.** State the mainstream view first, then present counter-evidence from source code or data, then give a per-scenario conclusion.

## Language

Respond in the same language the user uses to ask their question. If they ask in Chinese, answer in Chinese. If they ask in English, answer in English.

## Content Index

Each directory contains `.mdx` files with detailed explanations.

### JavaScript & TypeScript — `/javascript/`, `/typescript/`
Async programming (Event Loop, Promise, task scheduling), execution context and closures, scope and prototype chain, V8 GC, JIT and memory leaks, Proxy/Reflect, error handling, Service Worker and cross-tab communication, hand-written implementations. TypeScript type system and generics.

### CSS — `/css/`
Box model, BFC, Flexbox and Grid layout, stacking context, selectors, paint and rendering, animations, CSS variables, responsive design, mobile adaptation (viewport, dvh, safe areas, device pixel ratio), preprocessors, CSS-in-JS, and Web Components.

### Frontend Frameworks — `/react/`, `/vue/`
React: Fiber architecture, Hooks internals, Concurrent Mode, performance optimization. Vue: reactivity system, virtual DOM diffing, template compilation.

### Browser & Networking — `/browser/`
Rendering pipeline (DOM construction, rasterization, compositor thread), TCP/TLS handshake, HTTP/2 vs HTTP/3, 0-RTT security risks.

### Engineering — `/engineering/`, `/testing/`, `/performance/`, `/state-management/`, `/micro-frontend/`, `/monorepo/`
Bundling (Webpack, Vite/ESBuild/Rollup, Tree Shaking), testing strategies, performance profiling, state management patterns, micro-frontend sandboxes, Monorepo tooling.

### AI Engineering — `/ai/`
LLM fundamentals and training pipeline, embedding and vector retrieval, prompt engineering, RAG, agent harnesses (Pi, DeepSeek Harness), multi-agent orchestration (LangChain/LangGraph, Lead Agent task delegation), tool-calling design and troubleshooting, MCP protocol, agent organization patterns (super agent, personal agent, digital employees, expert teams), enterprise agent permissions. Also covers AI code generation, design-to-code, and PRD-to-code workflows.

### Cross-platform & Runtime — `/nextjs/`, `/nodejs/`, `/react-native/`, `/taro/`, `/uni-app/`, `/flutter/`, `/harmonyos/`, `/electron/`, `/tauri/`, `/docker/`
Next.js, Node.js, React Native, Taro, uni-app, Flutter, HarmonyOS, Electron, Tauri, Docker — each directory has one focused guide.

### Resources — `/skills/interview-guide-writer/resources/`
`terminologies.md` — Chinese/English terminology mapping. `frontend_ai_experts.md` — expert and team backgrounds. `tech_company_blogs.md` — engineering blog list from major companies.

## How to Use This

Developers: read through the sections to prepare for interviews. AI agents: treat this file as a reference index — look up the relevant `.mdx` files when answering questions.