The Million Dollar Trick: Spotting ABCs

So here’s the deal.

There are some logics or components in our apps that coding models can 100% generate. Always. Doesn’t matter which version of the model, doesn’t matter how you phrase the prompt — the result comes out the same.

Like image sliders, modal popups, form UIs, dropdowns, tabs.

I call them ABCs → AI Boilerplate Code.

here are some example of ABCs:

Something AI will always nail the same way:

tsx

// ABC: Modal Component (Next.js / React)
export default function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40">
      <div className="bg-white p-6 rounded-lg shadow-xl">
        {children}
        <buttononClick={onClose}
          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
        >
          Close
        </button>
      </div>
    </div>
  )
}

No matter how many times you ask AI for a modal, it’ll give you this same pattern (overlay div, centered box, close button), this is an classic ABC.

Backend ABC (Basic CRUD Route)

A classic endpoint AI will also always get right:

tsx

// ABC: Basic Express.js CRUD route
import express from "express"
const app = express()
app.use(express.json())

// Create
app.post("/users", (req, res) => {
  const user = req.body
  // pretend to save in DB
  res.status(201).json({ message: "User created", user })
})

// Read
app.get("/users/:id", (req, res) => {
  const { id } = req.params
  res.json({ id, name: "John Doe" }) // mock response
})

app.listen(3000, () => console.log("Server running on port 3000"))

This boilerplate CRUD? AI hits it 100% every time, same structure.

When you’re learning a stack, instinct is to, write every damn thing down, Take notes on the 5-line slider function, memorize all the techniques in react like how to wire up the form with states, but now the new game is: spot the ABCs → don’t waste brain power there.

ABCs = boring, repeatable, generic → let AI cook.
Non-ABCs = flows, architecture, debugging → YOU master.

Because yeah, you still know what it does, what it takes, what it returns, and edge cases.

You just don’t hand-type that anymore.

quick side rant — find the balance

This doesn’t mean you outsource everything. I fully support algorithms, logic building, writing your own functions from scratch. Because problem solving muscles come from that grind.

That’s how you grow confidence and clarity. But if you’re building a client project or cranking out a SaaS demo? You don’t need to re-write the 50th image slider. That’s when ABCs save you

Non-ABC (stuff you must master yourself)

Auth (JWT, sessions, cookies, middleware)
Data fetching strategies (SSR, SSG, ISR, client fetch)
State management decisions (when to use Context/Redux/TanStack/Zustand)
Performance (memo, hydration, client vs server split)
Error handling (retries, fallbacks)
API ↔ DB ↔ UI sync logic
Security (XSS, CSRF, SQL injection)
Scalable folder structures & architecture

any change that requires keeping the context of mulitple layers ( schema to controllers to routes to ui ) of your apps in head, is better handled by you.

🔑 how to spot an ABC fast — this is golden

Is it a tiny self-contained UI widget? → ABC.
Does AI always spit out the same code? → ABC.
If AI gave me wrong code, would I notice instantly? → If no → ABC.
Does this touch architecture/debugging/security? → then not ABC.

TL;DR

The 1M dollar advice for learning stacks faster than anyone else:

learn to spot ABCs
don’t waste time memorizing them
leverage AI for those

AI is the intern.