Vibe Coding Tutorial and Best Practices (Cursor / Windsurf)

preview_player
Показать описание
Got a lot of questions asking about my stack and what I do when vibe coding. So I made a full video on it!

Join My Newsletter for Regular AI Updates 👇🏼

My Links 🔗

Media/Sponsorship Inquiries ✅
Рекомендации по теме
Комментарии
Автор

# Coding pattern preferences

– Always prefer simple solutions
– Avoid duplication of code whenever possible, which means checking for other areas of the codebase that might already have similar code and functionality
– Write code that takes into account the different environments: dev, test, and prod
– You are careful to only make changes that are requested or you are confident are well understood and related to the change being requested
– When fixing an issue or bug, do not introduce a new pattern or technology without first exhausting all options for the existing implementation. And if you finally do this, make sure to remove the old implementation afterwards so we don’t have duplicate logic.
– Keep the codebase very clean and organized
– Avoid writing scripts in files if possible, especially if the script is likely only to be run once
– Avoid having files over 200–300 lines of code. Refactor at that point.
– Mocking data is only needed for tests, never mock data for dev or prod
– Never add stubbing or fake data patterns to code that affects the dev or prod environments
– Never overwrite my .env file without first asking and confirming

solvsmart
Автор

This week I instructed the cursor ai to create a development journal markdown file and in the rules I instructed it to use it as journal to help it keep track of the project, milestones and conversations that I have with. I told it to be thorough and always append to it and not delete anything. It's actually really helped me keep the AI on track and starting a new conversation with it, it will read that journal right away for the most part, or I just tell it to ready it. This simple little change, has really improved my AI's ability to stay on track and keep moving forward with the application without variation.

aaronbrown
Автор

One trick I found when starting new chats is ask for a summary of what it’s done so far and I paste that summary in the new chat

EmmanuelCrown
Автор

Vibe coding = what everybody who wasn't already into software development has been doing with AI since they first started. Before Cursor, I just copied and pasted what ChatGPT gave me into vscode and put the errors back into chatgpt 😂

its_ot
Автор

I recently build a three tiers web application (Angular frontend, Python/FastAPI backend and PostgreSQL database) on Docker using Cursor with Claude Sonnet 3.5 and Gemini 2.0 Flash Thinking. I took more of a step-by-step approach and proceeded by iterations, e.g, set up the docker configuration for FE/BE/DB, once that was done I described the data I needed and got the SQL done, then asked to expose CRUD APIs for the SQL tables etc. It's like being a Tech Lead engineer coordinating a team of devs and assigning tasks. The whole thing turned out very good, super satisfied with the results - it would have easily taken me 10x the time to build it myself.

robistocco
Автор

Summary (with chapter timestamps): The video discusses Vibe coding using AI agents in tools like Cursor and Windsurf, focusing on best practices, setup, and overcoming common issues to efficiently build applications.
0:00 🤖 Introduction to Vibe Coding
• 🎯 Vibe coding uses AI agents to write code with minimal human input.
• 🛠️ The speaker uses Cursor and Windsurf with models like CLA 3.7 Sonnet Thinking.

1:00 🔧 Setup and Models
• 🔩 Cursor and Windsurf allow custom model setup via API keys.
• ⚙️ The speaker uses Grock due to its compatibility with OpenAI standards.

1:56 📜 Writing Specifications
• 📄 A detailed spec is crucial for AI to generate accurate code.
• 📋 The example spec includes backend, frontend, and database details.

2:57 📝 Coding Rules and Preferences
• 📜 Rules guide the AI on coding practices and technologies.
• 📌 The speaker emphasizes avoiding code duplication and focusing on specific tasks.

13:44 🧪 Testing and Iteration
• 🧪 End-to-end testing is more effective than unit tests.
• 🔄 Frequent commits and checkpoint restores are recommended.

19:54 🌟 Future of Vibe Coding
• 📱 The speaker wishes for mobile Vibe coding solutions.
• 🚀 The tools are expected to improve, making coding more accessible.


** Generated using ✨ VidSkipper AI Chrome Plugin

GunjanPatel
Автор

My workflow in Windsurf when trying out new stuff or creating POC.

1. I ask for my AI assistant to create project folder named "testproject" with idea.md file and open that in Windsurf
2. Then in Windsurf I write my idea of application to idea.md
3. I tell Claude to read idea.md and make plan.md with step by step instructions to implementation and not to do anything else before I accept plan
4. Back and forth discussion about tech stack etc
5. When plan sounds good I tell Claude to go ahead and implement
6. I go make some coffee or vibecode with Cursor / Aider / Cline when Claude is working in Windsurf :)

RKKMotorsports
Автор

Another trick. I have cursor write detailed documentation on every major feature it builds and now have a /docs folder with about 12 markdown files and an overview.md file that indexes all of the docs. That way I can give it the overview and tell it to find and relevant documentation as needed.

believablybad
Автор

Absolutely awesome! Watched it at 10x speed by posting the link on Gemini.

NavneetRingania_from_Guwahati
Автор

For starting a new chat, I simply tell Windsurf that I want to create a new chat. Then, I ask it to generate a simplified version of the context in a .md file. After that, I start the new chat and instruct it to read the .md file first.

nufh
Автор

I watched your other 2 vids on vibe coding this morning and thought I'd love a best practices vid from you. And tada! Here it is!! Watching next. 🎉

rtwg
Автор

I just started working with Cursor today and your rules really helped. Had been working manually with Claude via its app which was exhausting, given the size of my codebase. Everything you said in this video was true to my experience, especially in it creating unnecessary code and creating exceptionally long files. Such perfect timing. Thank you, Matthew.

thwalltv
Автор

These rules are gold. I was having issues with it breaking stuff that worked. Thanks!!

dennist.
Автор

These coding preferences suggestions are super helpful. I've run into the same frustrations, definitely going to try this.

MichaelJanzen
Автор

Good points.. and I've found that if you use strong positive adjectives like "awesome" or "amazing" (make it amazing) it will work extra hard to find a solution for something that it was stuck on in a loop.

BenNitti
Автор

Wow. You saved me tons of time! I’ve been using Curser without rules and pulling my hair out over the bad results. Overthinking, bad implementation— everything you’ve named. Instant thumbs up!

StrykEdits
Автор

I’m a technical product manager, not a coder, and i’ve been spending the last few weekends building a SaaS app. It is refreshing to know someone who is a coder had run into the same problems and issues, so that was reassuring for me. Also super helpful to see how you addressed those issues. Biggest take aways mentioned in this video and learnings from vibe coding and going down various ratholes are: commit often, don’t stay in a single chat window for more than an hour as it’s like coding with the smartest rockstar coder you’ve ever met who also has Alzheimer’s/dementia, and for the best performance, give it specific and narrow tasks. So addicting though!!!

michaeltupper
Автор

been vibe coding for months but my workflow was all over the place 😂 made a similar system with docs folder + keeping track of context in markdown files. crazy how much faster you can build when the AI actually remembers what ur working on lol

techsass
Автор

Been coding like this for two years now, but only recently started using cursor. Met many of the same issues and taken. Many of the same measures. A couple of own to add to the mix: get cursor to create a debugging log that it updates as you code - where you track bugs and their solutions. Add this as context when handling a new bug to give it the benefit of your previous learnings and to stop it reinventing the wheel… again. That plus modular coding to reduce errors, custom shortcuts (SCE = I’ve attached a screenshot of an error, DBU = update the debugging log etc) and unique identifiers for each code iteration help me allot. I work in a separate environment that runs iron python in ‘nodes’ which adds a level of complexity. Oh yeah and save out your debugging log and any other learnings-files BEFORE you restore form a previous point in time!!! With the phone limitation - I’m going to just try a remote desktop app and run the pc from the phone.

almarfleet
Автор

Wow thanks for the info on Rules! We need a central place where the best rules people have identified for addressing specific models shortcomings can be copied and used by everyone

suntank
welcome to shbcf.ru