القائمة
Module 3.1: Vibe Coding Setup. Introduces the build loop and creates the quiz-project folder.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/carlvellotti/free-ai-courses --skill start-3-1يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
| name | start-3-1 |
| description | Module 3.1: Vibe Coding Setup. Introduces the build loop and creates the quiz-project folder. |
At the start of this lesson, copy the bundled lesson support files into the workspace if they are not already present. Briefly tell the student what files are available if you mention them during the lesson.
cp -rn .agents/skills/start-3-1/assets/* . 2>/dev/null || true
Follow the course teaching rules in .agents/skills/_shared/teaching-rules.md. In short: follow the lesson script in order, speak naturally, stop at each STOP/CHECK point, and do not break the fourth wall.
Welcome to Module 3. Now we BUILD.
In the earlier modules, you learned to work WITH files - analyzing, synthesizing, extracting insights. In Module 3, you're going to CREATE something from scratch.
STOP: Excited?
USER: Yes
STOP: Quick question - are you a product manager?
USER: Yes, I'm a PM
Great! A lot of non-PMs have found their way into this course, so some things are explained that you'll already know - like requirements. But don't worry, we go over them quickly, and there's still lots of new stuff for you in this module.
USER: No / Not exactly
Perfect! This module is designed to be accessible to everyone - no PM experience needed.
Let me tell you what we're building: a "What's Your Coffee Personality?" quiz.
Here's what it does: visitors answer some fun questions, and at the end they get a personality type AND a coffee recommendation. Like "You're a Bold Adventurer - try a Double Espresso!"
It's a drink recommendation engine dressed up as a personality quiz. Fun AND useful. And it's a perfect first project because it has real interactivity - questions, answers, logic, results - without being overwhelming.
That's what we're building in this module.
This is a guided experience - I'll walk you through every step so you succeed. But the skills you're learning transfer to building whatever YOU want afterward. Landing pages, tools, apps, anything.
By the end, you'll have a real website with a real link you can send to your friends. Not a fake demo. A real, working thing on the internet. Almost no other vibecoding courses teach you how to make it live.
STOP: Sound good?
USER: Yes
Here's the mindset shift for this module: You're the product manager, I'm the engineer.
You describe what you want. I write the code. You don't need to understand the code. You just need to know what you want.
Your job is to be clear about requirements, agree on the plan, review what I build, and tell me what to change.
STOP: This is how non-technical people work with developers. You're about to learn that skill. Make sense?
USER: Yes
Here's what we'll do across these lessons:
Requirements → Build → Iterate → Save → Deploy. That's the loop.
STOP: Ready to learn it?
USER: Yes
Let's talk about the tech. The code I write will be in JavaScript - the most popular programming language for websites. I'll also use something called Next.js, which is a popular framework - basically a pre-built structure that makes JavaScript websites easier to build and deploy.
You don't need to understand any of this. I handle all the code. I'm just mentioning it so you're familiar with the terms.
This module has 5 lessons and takes about 1.5-2 hours total. You don't need to do it all in one sitting.
STOP: Ready to get started?
USER: Yes
Let's create a folder for your quiz project.
STOP: Ask me to create a new folder called quiz-project/
USER: Create a new folder called quiz-project
ACTION: Create a new folder called quiz-project/ in the current directory
Done! I created:
quiz-project/
That's where all the code and files for your quiz will live.
Open Files and look for quiz-project/.
STOP: Can you see the new folder in Files?
USER: Yes
What you just learned: The mindset and setup for building something from scratch.
Where else this applies:
This course was created by Carl Vellotti (X / LinkedIn) - if you have thoughts or feedback on the course, he's always happy to hear from users!
And if you haven't already - join the official newsletter and community at ccforpms.com. It's THE place for PMs using Codex: new modules, in-depth guides, and a community.
STOP: Want me to open that site for you to subscribe?
USER: Replies
ACTION: If user says yes, open https://ccforpms.com in browser
Next up: In 3.2, we're going to figure out exactly what YOUR quiz should be. I'll interview you about what you want, and we'll create a requirements document together. This is where you make it yours.
STOP: Ready for 3.2? Say "let's go" or type /start 3 2
USER: Let's go
ACTION: Before wrapping up, record this lesson as complete by running this WITHOUT NARRATING the raw output:
fspm progress complete codex-pms-3-1
If it fails because the fspm CLI isn't installed, follow the teaching rules' missing-CLI guidance: tell the learner progress tracking needs the FSPM CLI, offer to install it, and continue the wrap-up either way.
Then close out with the student's options, in natural language (never as a command list):
/start 3 2
quiz-project/ folder should be created in whatever directory the user is currently inquiz-project/ folder exists