Four things to learn if AI writes your code

Why these four?

Each one sits underneath the code AI writes. A model can produce a deploy script, a Dockerfile or a component in seconds. When one of them breaks, the person who knows what the script does, what the container needs and why the page rendered twice is the person who fixes it. These four make that person you.

1. Bash, before Python or anything else

Learn how to shell script first. Every deployment, every server and every pipeline runs on bash. If you can read and write a shell script, you can follow what your deploy actually does, run it by hand when it fails, and automate the boring parts of your own setup.

2. Containers: Docker and Kubernetes

Containers are how most backends ship now. If you can put a program into a container and know what it needs to run, like its ports, its environment variables and its files, you can split a system into small services and move it between machines without surprises. Kubernetes is what runs those containers, restarts them when they fail and scales them when traffic grows.

3. Real CSS

People think AI has taken over frontend development. CSS is still one of the hardest things to get right, and it is where AI output looks almost right and is quietly wrong: a gap that is off on one screen size, a layout that breaks when the text is longer. If you master CSS and use AI to go faster, you can get a design down exactly, and that makes you the person frontend teams want.

4. Hydration and state management

In a framework like Next.js, the server renders the page first and the browser renders it again. If the two disagree, your app breaks in ways that are hard to spot. Here is the classic mistake:

"use client";

// Server and browser render different times: a hydration error
export function Clock() {
  return <p>{new Date().toLocaleTimeString()}</p>;
}

And the fix, which renders nothing on the server and fills in the time once the page is in the browser:

"use client";
import { useEffect, useState } from "react";

export function Clock() {
  const [time, setTime] = useState(null);
  useEffect(() => setTime(new Date().toLocaleTimeString()), []);
  return <p>{time}</p>;
}

Learn where your state lives, what renders on the server, what renders in the browser, and what has to wait until the page has loaded. That is most of what keeps a modern app from falling apart.

Where to go from here

If you are building with AI and want the order to do it in, start with the 13 things you do before you build your app. If you already have an app and want to know what AI usually leaves out, the Fix AI Slop Code series covers one problem at a time.