Published and updated 31 July 2026 · Field Reference
Published and updated 31 July 2026 · Field Reference
Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap connects the essential decisions in this stage of frontend engineering. You will learn each browser or framework model from first principles, apply it to the progressive Learning Atlas product, diagnose a realistic failure from evidence, and direct an AI collaborator with explicit constraints. The goal is independent judgment, not memorized syntax.
You will advance a personal field manual and deliberate-practice plan. By the end, you can explain every topic in this chapter, implement one focused slice per topic, adapt those slices under new constraints, and defend the result with browser evidence, strict types, accessibility checks, security boundaries, and a production build.
Bring forward notes/frontend-field-manual.md and a weekly evidence log and the verification notes from the preceding chapter. Create a narrow Git branch, read the repository rules, and inspect existing changes before editing. When a tool or file is introduced for the first time, its purpose is explained before its syntax.
Use these project-orientation commands:
Before beginning Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap, stop if the working tree contains files you do not understand. Do not delete, reset, or rewrite another person's work to make the lesson cleaner.
Expertise is organized retrieval plus repeated diagnosis. A useful reference tells you what to observe and decide; it does not replace understanding. Practice should increase ambiguity, responsibility, and feedback quality over time. The topics below are ordered because each creates evidence needed by the next. Experienced readers may jump to a topic, but should still complete its failure investigation and adaptation task.
A useful cheat sheet routes symptoms to models and evidence: URL and HTTP, DOM and accessibility tree, cascade and layout, JavaScript events, TypeScript contracts, React state, Next.js rendering, data ownership, security boundaries, and release telemetry.
The current artifact for frontend mental models, command, and debugging cheat sheet is notes/frontend-field-manual.md. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A developer searches for another command instead of identifying whether the failure belongs to shell, package script, compiler, dev server, browser, or origin.
Evidence to collect: Read the full command and exit status, identify cwd and process, inspect the first causal error, and follow the value across one boundary at a time.
Minimal repair rule: For frontend mental models, command, and debugging cheat sheet, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Take five past defects and write the first model, evidence source, and discriminating check you should have used.
A prompt library should preserve reasoning structure, not freeze one vendor's syntax. Reusable prompts make goal, context, constraints, acceptance, process, inspection, and stop conditions explicit for research, builds, bugs, reviews, refactors, tests, and releases.
The current artifact for the ai-native prompt library is notes/prompt-library.md. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A copied prompt demands production-ready output but supplies no repository rules, user states, or verification commands, producing confident generic code.
Evidence to collect: Score the prompt against missing decisions, then compare response assumptions, changed scope, evidence, and unresolved uncertainty.
Minimal repair rule: For the ai-native prompt library, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Create a prompt from the same template for one build and one bug, changing the evidence and acceptance sections appropriately.
Attach its parent, shared primitives, data types, and visual states. Ask for semantic HTML, strict types, keyboard behavior, responsive rules, failure states, and focused verification. Require the agent to explain the server/client boundary and show the smallest useful diff.
Provide exact reproduction, expected and observed behavior, environment, logs, screenshots or DOM evidence, and the last known good state. Ask for ranked hypotheses, one discriminating check at a time, the root cause, a minimal repair, and a regression test.
Ask the reviewer to trace requirements through the diff, then inspect correctness, accessibility, security, performance, maintainability, and test quality. Findings must identify a concrete failure scenario and file location; preferences belong in a separate suggestions section.
State which behavior and public contracts must not change. Ask for dependency boundaries, migration sequence, characterization tests, reversible commits, rollout strategy, and stop conditions. Reject rewrites that cannot be compared incrementally.
Growth moves from reproducing to explaining, adapting, designing, and verifying. Deliberate practice uses feedback and gradually wider responsibility: browser fundamentals, typed components, server boundaries, product states, accessibility, security, performance, operations, and technical leadership.
The current artifact for from junior to expert: practice roadmap and interview preparation is notes/practice-roadmap.md. Before editing, predict the visible behavior and name the source of truth. Then implement or study this complete focused slice:
Scenario: A candidate memorizes framework answers but cannot predict a render, investigate a failing request, or state the tradeoff behind a client boundary.
Evidence to collect: Use a live unfamiliar scenario: ask for prediction, evidence, adaptation, threat boundary, quality plan, and reflection rather than trivia recall.
Minimal repair rule: For from junior to expert: practice roadmap and interview preparation, correct the first boundary that violates the documented model, preserve the rest of the working path, and add a regression check based on the observed evidence.
Build a twelve-week plan with weekly artifacts, one failure investigation, one explanation, one review, and a monthly shipped vertical slice.
For interviews, narrate how you reduce uncertainty. Clarify the user and constraints, draw the state and trust boundaries, choose a small vertical slice, state accessibility and failure behavior, and explain how you would verify it. A correct tradeoff explained clearly is more valuable than a memorized perfect phrase.
Goal: Advance a personal field manual and deliberate-practice plan through one learning outcome at a time while keeping the implementation understandable and reversible.
Context to attach: the current field reference outcome, the product brief, repository rules, package versions, relevant files and callers, shared types or tokens, the current Git diff, and the latest observed failure or command output.
Constraints: while advancing a personal field manual and deliberate-practice plan, preserve concurrent work; use semantic HTML and strict TypeScript; keep Server Components as the default in Next.js; validate untrusted data on the server; do not expose secrets; include loading, empty, error, success, disabled, and partial states when relevant; make one bounded change.
Acceptance criteria: the field reference adaptation works from 320 pixels upward; keyboard and focus behavior are complete; color is not the only signal; authorization and validation are enforced at authoritative boundaries; the relevant type, lint, build, and browser checks pass.
Reusable prompt:
We are implementing one outcome from “Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap” in the Learning Atlas. Read the attached repository rules, outcome text, relevant files, current diff, and verification evidence. Restate the user-visible result, source of truth, trust boundary, valid states, and unknowns. Propose the smallest reversible vertical slice. Implement only that slice. Then report the exact diff, criterion-to-evidence mapping, remaining risks, and the next discriminating check. Stop before dependency installation, destructive action, public-contract change, authentication decision, or deployment unless explicitly authorized.
For Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap, inspect the response without relying on its summary. Read every changed line, compare it with the actual source of truth, and reproduce the evidence yourself. Reject unexplained assertions, broad client boundaries, missing states, invented APIs, suppressed errors, or tests that merely restate implementation details.
Take an unfamiliar production symptom and use the field manual to form a prediction, collect one discriminating observation, choose a prompt, implement a narrow repair, and explain the tradeoff under interview-style questioning. Write exact reproduction steps and expected versus observed behavior. Follow the value across every relevant boundary until you find the first contradiction.
Within the design and verify stage of Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap, change one cause, not several symptoms. Rerun the original reproduction, one adjacent failure case, keyboard navigation, and the focused static checks. The lab is complete only when you can explain why the repair works and which regression check would have failed before it.
Run the scripts that this project actually defines:
If your learning project later defines a test script, run it as an additional gate; do not report tests as passing when no test command exists. In the browser, rebuild one concept from memory, explain it to another person, then adapt it under a new constraint. Repeat the primary journey at 320, 768, and wide desktop widths, at 200% zoom, in both themes, by keyboard, and with reduced motion. For networked work, simulate slow, malformed, unauthorized, empty, and failed responses.
Close Field Reference: Mental Models, Prompt Library, and Expert Practice Roadmap and draw its models from memory. Pick two outcomes and explain how a decision in the first can cause a failure in the second. Then complete three levels of practice:
You have treated field reference as a connected engineering system rather than isolated syntax. The durable result is not the example code; it is the ability to predict behavior, expose assumptions, collect evidence, bound AI work, and repair the first broken boundary. Carry the product files and evidence log into the next stage.