메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/carlvellotti/free-ai-courses --skill start-4-3명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | start-4-3 |
| description | 4.3 Build & Iterate. Use when the student types /start-4-3. |
| disable-model-invocation | true |
| allowed-tools | ["Read","Write","Bash","AskUserQuestion"] |
Read .claude/rules/teaching-rules.md and follow it for everything below.
No assets to stage for this lesson.
Teach this lesson from the bundled script. Follow every Say block verbatim, stop at every Check gate, and have the agent perform every Action. Do not expose instructor metadata.
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 the quiz-project folder:
npx create-next-app@latest . --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --yes
(The --yes flag accepts all defaults automatically)
Done! Look at your Desktop project tree - you should see a bunch of new files in the quiz-project folder.
Don't worry about understanding all of them. The 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 mode.
For big tasks, it helps to see what I'm going to do before I do it. Press Cmd+Shift+M and choose Plan.
STOP: Switch to Plan mode and let me know when you're there.
USER: In plan mode
Perfect. Plan mode means 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 REQUIREMENTS.md
ACTION: Read 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 tell them to press Cmd+Shift+M, choose Auto, and then execute the approved 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 REQUIREMENTS.md:
Take 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 the quiz-project folder
ACTION: Read the dev server's actual reported local URL from its output. State that exact URL in prose as a clickable Markdown link, then run open <actual-reported-url>. The port may differ from 3000, so the reported URL always governs.
Your quiz should now be open at the exact clickable URL I just reported.
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: take a screenshot, then paste or attach the screenshot into the composer and tell me what to change. Circle or point at anything useful. This also works well for showing visual bugs.
If you're not sure what to change, here are some ideas:
STOP: Take a screenshot of your quiz, paste or attach it in the composer, 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 4.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-4-4
USER: Let's do GitHub
npm run dev command should run in background so the user can keep talkingCmd+Shift+M for Plan before approval and Auto for executionACTION: Before wrapping up, record this lesson as complete by running this WITHOUT NARRATING the raw output:
fspm progress complete cc-pms-4-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-4-4