4. 구현

시작 상태

npm run lint && npm test && npm run build && ls docs/plans/*-charcount.md

3단계 계측을 마친 뒤 /clear한 새 세션에서 시작합니다. 세 게이트가 모두 통과하고 계획 파일이 있어야 합니다. 아니면 3. 게이트 먼저로 돌아갑니다.

이 단계에서 하는 것

Prompt 3번 틀의 구현 세션 프롬프트를 씁니다. 계획 파일만 읽히고 구현을 시킵니다. superpowers 같은 프로세스 스킬이 설치되어 있으면 어느 시점에 개입하는지 관찰합니다. 게이트 플러그인은 지식을 대신해 주지 않습니다. 판단의 타이밍을 대신해 줍니다. 이 점은 Plugins가 다룹니다.

따라하기

구현 프롬프트. <날짜>는 2단계에서 만든 계획 파일 이름으로 바꿉니다. ls docs/plans/로 확인합니다. 바꾸지 않으면 @가 파일을 올리지 못합니다.

@docs/plans/<날짜>-charcount.md 를 읽고 구현해 주세요.
각 단계 끝나면 계획에 적힌 확인 명령을 실행하고 출력을 보여 주세요.
countChars 는 테스트를 먼저 쓰고(이모지 하나, 조합 한글, 빈 문자열, 공백만 있는 입력 포함)
실패를 확인한 뒤 구현해 주세요.

맨 앞의 @가 계획 파일 내용 전체를 이 프롬프트에 함께 올립니다. 활용 팁의 파일 참조 절에서 본 형태입니다.

관찰할 것 세 가지를 체크리스트로 둡니다. (가) 테스트가 먼저 써지고 실패 출력이 보였는가. (나) 각 단계 끝에 확인 명령 출력이 실제로 있었는가, 아니면 “완료했습니다”만 있었는가. (다) 프로세스 스킬이 개입했다면 어느 단계 전에 개입했는가. 스킬 이름은 /skills로 확인합니다.
앱을 눈으로 한 번 봅니다. npm run dev 후 브라우저에서 입력해 보거나, /run을 씁니다.
끝 비용과 컨텍스트 사용률을 읽어 docs/tutorial-log.md의 “4. 구현” 행에 적습니다.
구현과 기록표를 함께 커밋합니다. git add -A가 기록표를 함께 담습니다.

git add -A && git commit -m "feat: 글자 수 세기"

완료 확인

npm run lint && npm test && npm run build; echo "exit=$?"
grep -n 'data-testid="count"' index.html src/*.ts

exit=0이고, data-testid가 한 곳에 있어야 합니다.

계측 기록

값은 4번에서 이미 적었습니다. 시작 상태를 확인한 직후 시작 비용을, 커밋 직전에 끝 비용과 컨텍스트 사용률을 각각 적고 차액으로 읽습니다. 세션 수는 이 단계에서 연 세션 개수입니다. 2단계 행과 나란히 놓고 비교하십시오.

어긋났을 때

“완료했습니다”만 있고 확인 명령 출력이 없으면 출력을 요구합니다. 이 원칙은 Claude Code를 잘 쓰는 5가지 원칙 5번에 있습니다.
테스트가 구현 전부터 초록이면 검사는 통과하는데 실제로는 깨져 있을 때를 확인합니다.
스킬이 안 걸리면 skillOverrides부터 확인합니다. 네 값의 의미는 Skills에 있습니다.