vibe coding

The basics:

notes

Start with the design document. You will constantly be starting new chats, it should be concise but thorough enough to orient the model to what it's working on by including @docs.
Implementation plan
- Have a 50-step implementation plan - src
- "If you don’t iterate on this at least 3-5 times YOU ARE NOT DONE." - src
- This is your coding step now. The plan and overall architecture must make sense to you. You know that if implemented as written, this would be a manageable codebase. You should be able to hand this off to a junior dev.
Rules: add general ones and find specific ones for your primary libraries. e.g. search "phaser 3 typescript cursor rules"
Manual prework: set up TS + Biome/ESLint to catch basic errors. Use a base like yarn create vite . --template react-swc-ts or a more complete template. Don't let the model try to set up your tooling.
- When prompting later, tell it to ignore TypeScript or other errors for the first pass. Get a working version, then start a new chat and have it fix types.
Start by building a standalone implementation directly in Claude 3.7/Gemini 2.5, outside Cursor
- Get the basic structure correct here based on real-world usage/patterns for your stack.
- Examples are hugely helpful. use repomix site or CLI to download specific examples, then drop the .xml output file into your initial version.

npx repomix --remote tanstack/table --include "**/examples/react/**" --ignore "**/*.json,**/*.html,**/vite.config.js,**/*.css"

Now move into Cursor, copying in the working standalone version.
- Use Cursor's built-in official docs for your stack, e.g. reference @Phaser when expanding/modularizing your initial version.
Number 1 tip: If it doesn't implement 98% what you want on the first prompt, just reset and refine the prompt. Don't try to have it fix what it's written.
- If it fails a couple times, end your prompt with something like: “If you need clarification or have any questions, feel free to ask.” - src
- If that doesn't work, this prompt is your best friend:
  - Reflect on 5-7 different possible sources of the problem, distill those down to the 1-2 most likely sources, and then add logs to validate your assumptions before we move on to implementing the actual code fix. - src
  - Once it adds logs: right-click in the devtools console > Copy Console, then paste back into Cursor (or set up BrowserTools MCP).
- If you really have trouble with a prompt in Cursor, return to the minimal standalone version and ask the same question there. Once it works, re-prompt in Cursor with the correct solution.
Use a new chat for every item!
Treat it like a computer, not a person. Be clear, not polite. If it you see the thinking going off in the wrong direction, hit stop and refine the prompt. Use ALL CAPS or emphasis alongside words like "must" or "explicitly forbidden" to keep the model focused.

custom commands

for your .cursor/rules/general.mdc:

## Custom Commands

When I say "/commit", you will give me the terminal command that will add files, include a full descriptive commit message, commit and push to git based on the diff of working state. Output this as a command I can run myself wrapped in triple-backticks. You should assume all files modified and unstaged need to be considered. If I specify specific files, then only attend to those. Within a single commit message create a summary for the commit, then a blank newline, then group the bullet points semantically. For example if backend related or frontend related. No need to describe what you are doing. Follow this template (newlines are allowed):

"""
git add . && git commit -m "Fix scene transition issues and object lifecycle management

- Fix TypeError during scene transitions by implementing proper cleanup
- Update Triangle and Corner classes to ensure they're added to scene" && git push
"""

When I say "/diff", you will summarize the diff of the working state.

When I say "/outline", you will provide a high level outline of the the features that will be implemented in a sequence that will be iteratively built upon.

When I say, "/next", you will summarise what the next feature to implement will be, based on studying the codebase.

example prompts

go through all files in the @docs, read @progress.md to understand prior work, and proceed with the next step in the implementation plan. Do not start the next step until I validate tests for the current one.

"Create a detailed pixel art frame animation for a game, where the final image is divided into multiple sub-images, each serving as a continuous animation keyframe. Design the sequence to depict [a wizard casting a spell: begin with intricate hand motions, then show the wizard conjuring a vibrant fireball, and finally capture the moment of casting the fireball.] Ensure the keyframes transition smoothly and continuously, and include as many frames as possible to achieve a high level of fluidity and detail in the animation."

Replace this part with your character + animation description: [a wizard casting a spell: begin with intricate hand motions, then show the wizard conjuring a vibrant fireball, and finally capture the moment of casting the fireball.]

https://x.com/majidmanzarpour/status/1905666224090218594

Here is a commit we made for making shapes appear solid. Do the same thing with our @EnterShape.ts rule - make it a utility and reuse it for both pending connections (don't let line pass inside) and the the validation rule checking. You will need to keep the dot product logic in EnterShape, as it checks whether the line drawn from a vertex is "inside" the shape, and ensure you don't introduce regressions such as checking for the inner angle outside the shape. The current implementation is working but not hooked up. The line should not appear invalid inside its starting shape, and it should not stop drawing at the point it exits the starting shape, it should not appear AT ALL inside the shape. All shapes should appear SOLID. You will need to use the utility in ConnectionManager to prevent the dragging line from entering the shape where it started. @src

Here is how this was previously implemented, use similar logic:

const startShape = this.shapes.find(
  (shape) => shape.id === startCorner.shapeId,
);  
...

rebolyte/readme.md

vibe coding

notes

custom commands

example prompts