Plan Based pro@coder Demo

Click here for YouTube version (Better on Mobile)

Here is a pro@coder demo showing how to apply production coding best practices using a plan-based development approach.

Prerequisite

• Install AIPack (to get the aip command line): See https://aipack.ai

• Recommended: Create a new folder and initialize a Git repository with a .gitignore file that ignores .aipack/ and other build files (best practices)

• Recommended: Open this folder in your IDE (e.g., VSCode, Cursor, etc.) and open an integrated terminal

• Install pro@coder with aip install pro@coder

Prompt used in this video:

First Prompt - Create initial index.html

First, implement the following. No plan is needed for this task.

Under the `web-content/` folder, implement a single `index.html` file featuring a particle triangle. This triangle should explode on the first click and then reassemble on the second click.

- Use Canvas2D.
- The canvas should resize with the screen, using a 16px margin.
- Triangle:
    - The triangle should be centered and point upward.
    - The triangle must occupy about two-thirds of the canvas area.
    - Triangle Particles must be 8px by 8px, spaced out by 4px.
    - Use a dark background and blue particles.
- Explosion:
    - The explosion should use `sin easeOutQuint` easing, originate from the center, move outward, and stop 80% of the way and hold this state until the next click triggers reassembly.
    - The explosion should look organic.
- Reassembly: 
    - The reassembly animation should use `easeOutElastic` easing.
    - When reassembled, it should return to the initial state.
- Other requirements: 
    - Ensure that clicks can be registered even during the animation.

Second Prompt - Ask to create the prompt

Following the plan rules, create a plan to refactor this index.html into a proper architecture

- js files under web-content/js/...
- main.js entrypoint, type module 
- cv-utils.js for canvas utilities
- cv-animation.js for animations
- easing.js for easing
- And any other good designed js. 
- Also config.js for holding the config values. 
- css/main.css
- start with the main js css refactor. 

Conclusion

This was a very simple example of how to apply some Pro AI Coding practices even when the start was vibe coded.

Here are some more tips about Vibe Coding to AI Pro Coding

Until next time, happy coding!