Plan Based pro@coder Demo

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. 

Other prompts

Smaller, see video. Make your own.

Until next time, happy coding!