القائمة
Module 3.3: Build & Iterate. Scaffolds and builds the quiz app, then iterates with feedback.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/carlvellotti/free-ai-courses --skill start-3-3يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | start-3-3 |
| description | Module 3.3: Build & Iterate. Scaffolds and builds the quiz app, then iterates with feedback. |
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-3/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.
This is it. Time to build your quiz.
I'm going to handle all the technical setup. You just watch the magic happen.
STOP: Ready?
USER: Yes
First, I need to set up the project structure - this creates all the starter files we need.
ACTION: Run the following command in quiz-project/:
npx create-next-app@latest . --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --yes
(The --yes flag accepts all defaults automatically)
Done! Open Files and look inside:
quiz-project/
You should see a bunch of new files there. Don't worry about understanding all of them. The quiz-project/app/ folder is where your quiz will live. Everything else is just configuration.
STOP: Do you see the new files?
USER: Yes
Before I build, let me show you something useful: plan-first workflow.
For big tasks, it helps to see what I'm going to do before I do it. In Codex, you can ask me to propose a plan first, review it, then approve execution.
STOP: Ready to have me plan before building?
USER: Ready
Perfect. I'll show you my plan, you approve it, then I execute. Let's do it.
STOP: Ask me to build the quiz based on the requirements.
USER: Build my quiz based on quiz-project/REQUIREMENTS.md
ACTION: Read quiz-project/REQUIREMENTS.md, then create a plan showing:
Present the plan clearly with bullet points.
Here's my plan. I'll create the quiz page, the question components, the results page, and style everything according to your preferences.
STOP: Does this look right? Any questions before I start?
USER: Looks good / [Questions]
ACTION: Answer any questions they have, then ask for approval to execute the plan.
Building now. This takes a minute or two. You'll see me creating and editing files. Just let me work.
ACTION: Build the full quiz application based on quiz-project/REQUIREMENTS.md:
quiz-project/app/page.tsxTake your time and build it properly. This is the core deliverable.
Done! Your quiz is built. Now let's see it in action.
I'm going to start your quiz running and open it in your browser.
ACTION: Run npm run dev in background in quiz-project/
ACTION: Wait a few seconds for the server to start, then open http://localhost:3000 if browser opening is available, otherwise ask the student to open it manually in browser
Your quiz should now be open in your browser:
This "localhost" link only works on YOUR computer - it's a temporary local version. We'll make it public later when we deploy.
STOP: Do you see your quiz?
USER: Yes! / [Issues]
ACTION: If they have issues:
Look at that! You have a working quiz!
Take it for a spin - answer the questions and see your result.
STOP: Try the quiz. Does it work? Do you get a result at the end?
USER: Yes it works! / [Something's wrong]
ACTION: If something's wrong, debug together. Common issues:
This is normal - first versions often need fixes. Let's get it working first, then polish.
Amazing! You just built a web app. Let that sink in.
The first version is never perfect. Let's iterate - make 2-3 changes until you love it.
Here's a trick: you can take a screenshot, attach it, drag it into the chat, or paste it here, then tell me what to change.
Circle something, point at it, whatever - just show me what you want different.
This is also a great way to show me bugs. If something looks wrong, screenshot it and paste it here.
If you're not sure what to change, here are some ideas:
STOP: Take a screenshot of your quiz, attach or paste it into chat, and tell me what you'd like to change.
USER: [Pastes screenshot and describes change]
ACTION: Make the requested change to the code
Done! Refresh your browser to see the update.
STOP: How's that? Want to change anything else?
USER: [More changes / Happy with it]
ACTION: Keep iterating until they're satisfied. 2-3 rounds is typical. Common requests:
Look at that - it's YOUR quiz, exactly how you want it.
This is the iteration loop: screenshot → describe → change → refresh → repeat.
This is how real product development works. And with AI, each iteration takes seconds instead of days.
STOP: Happy with how it looks?
USER: Yes
What you just learned: How to go from requirements to working product, then iterate until it's exactly what you want.
Where else this applies:
Next up: In 3.4, we save your code to GitHub. Right now it only exists on your computer. We're going to put it in the cloud so it's backed up and ready for deployment.
STOP: Ready to save your work? Say "let's do GitHub" or type /start 3 4
USER: Let's do GitHub
ACTION: Before wrapping up, record this lesson as complete by running this WITHOUT NARRATING the raw output:
fspm progress complete codex-pms-3-3
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 4
npm run dev command should run in background so the user can keep talkingquiz-project/quiz-project/REQUIREMENTS.md