Kuala Lumpur

TOPIC9 resources in reading order

AI coding: pick a tool, set up the project and check the result

Our coding guides in the order we'd read them: test a tool on one small task, set up the project, build, check the result, then automate the jobs you repeat.

This path mixes guides from building this site, small coding demos, a free skill pack we picked and the approval rules from the Academy. The order follows how a first project usually goes. Try a tool on one small task you can check. Set up the project so the agent works inside clear limits. Build one page, look at it in a real browser, then turn the jobs you repeat into skills or a small agent.

When we ran a guide's example for real, the date of that run sits under its title. Before you let an agent change anything that matters, read the five things AI should never do without you.

Read in this order

  1. GUIDE · Vibe codingWhat is Codex? Learn it on one small task you can check

    Start here if you're new. One edit on a throwaway page shows what a coding agent does, and the diff shows you exactly what it changed.

  2. GUIDE · Vibe codingAI code editors and coding agents: choose with one small build you can check

    Before you pay for a tool, give each one the same small build and check the results by hand. Our test of Claude Code and Codex CLI is the worked example.

  3. GUIDE · AutomationSet up a project for Claude Code: memory, permissions, checks and safe autonomy

    Set the project up before the agent works in it: a short CLAUDE.md, permission rules and a check it runs before it says done.

  4. TEMPLATE · Safety & checksThe five things AI should never do without you

    Write down what the agent must never do alone, such as spending money, deleting files or posting in public, before you give it more freedom.

  5. REPO · Vibe codingSuperpowers: make your coding agent plan and test before it builds

    For anything bigger than one page, make the agent ask what you want and plan small tested steps before it writes code.

  6. GUIDE · Vibe codingVibe-code a website that doesn't look AI-made: brief, build, browser check, review

    The order we use for pages on this site: a one-page brief, a design skill, a browser check at phone and desktop width, then a review.

  7. GUIDE · AutomationAI-assisted visual QA: Playwright captures at phone and desktop, light and dark, before you say done

    Check the result before you call it done. Playwright captures each page at phone and desktop width, in light and dark, and lists page errors.

  8. GUIDE · Skills & reposWrite a Claude Code skill for a job you repeat: page captures with error checks

    When you repeat a job, turn it into a skill. The example captures pages at two widths and reports the errors it finds.

  9. GUIDE · AutomationClaude Agent SDK: when to use it, with a tested example

    When a job has to run from your own code, the Agent SDK runs a small agent with only the tools you allow. In our example it reads files and is refused when it tries to write.

From the journal

Browse the whole library