---
name: blog-plan
description: 사용자가 이 TIL 블로그에 올릴 포스트를 기획하고자 할 때 사용. "X에 대한 블로그 써줄게", "Y 주제로 포스트 써야 해", "Z에 대해 TIL 올리고 싶어" 같은 작성 의도가 보이면 본문 작성 전에 이 skill이 먼저 상세히, 꼼꼼히, 자세히 기획서를 만든다. 기존 에이전트(frontend-skill-explorer, frontend-blog-verifier, frontend-ui-example-generator)를 병렬로 조율해 구조화된 기획 문서를 produce하며, 본문 작성은 절대 하지 않는다.
---

# TIL 블로그 포스트 기획 skill

블로그 포스트를 **작성하기 전 기획 문서**를 상세히, 꼼꼼히, 자세히 만드는 절차를 정의합니다. 본문은 절대 쓰지 않습니다 — 사용자가 기획을 승인한 뒤 별도 단계(`/til-write`)에서 작성합니다.

## 🔍 철저성 원칙 (Thoroughness Mandate)

이 skill의 모든 단계는 **상세히, 꼼꼼히, 자세히** 수행합니다. 대충 훑는 조사는 허용되지 않습니다.

- 에이전트 조사 결과를 하나도 빠뜨리지 말고 기획서에 반영
- 목차·섹션 구성은 추측이 아니라 조사 결과를 근거로 자세히 제시
- 참고 자료는 권위 있는 출처의 직접 URL만 꼼꼼히 기재
- 기획서 제시 전 self-review로 누락·모순·불명확한 부분을 최소 2회 점검
- 확실하지 않은 내용은 "⚠️ 검증 필요" 플래그로 명시

## ℹ️ `/til-plan` 커맨드와의 관계

- 이 skill: 응답에 기획서를 **출력** (파일 저장 X)
- `/til-plan <주제>`: 동일 조사를 수행하고 **`plan/*.md` 파일로 저장**

파일로 남겨 추후 `/til-write`로 본문 작성까지 이어가려면 `/til-plan`을 권장. 이 skill은 빠른 기획 확인용.

## 트리거 조건

사용자가 다음과 같은 블로그 작성 의도를 보일 때 자동 호출:
- "~에 대한 블로그 써줄게" / "~주제로 포스트 써야 해"
- "~에 대해 TIL 올리고 싶어" / "~에 대한 글 쓰려는데"
- 주제만 던지는 경우 ("React useEffect", "CSS Container Queries" 등)

"기획"이라는 말이 없어도 본문 작성 요청 시 먼저 기획서를 내밀 것.

## 절차

### 1. 범위를 자세히 확인

불명확하면 **한 번에** 질문 (최대 3개, 중복 금지):
- 깊이 (개념 소개 / 실전 예제 / 심화 비교)
- 대상 독자 (초급 / 중급 / 고급)
- 분량 감 (짧게 / 보통 / 길게)

상식선에서 판단 가능하면 묻지 말고 기본값(중급/보통)으로 진행. 단, 기본값 사용 시 기획서에 명시.

### 2. 기존 문서를 꼼꼼히 체크

Glob/Grep으로 `docs/` 하위 전체를 상세히 스캔해 같은 주제 문서 존재 여부 확인:
- **있으면**: 기존 문서 보완 / 새 포스트 분할 중 어느 쪽이 나은지 사용자에게 명확히 확인
- **없으면**: 배치 경로를 자세히 결정
  - `docs/{frontend|algorithm|tools}/` 중 적절한 섹션
  - 하위 카테고리 폴더 (예: `3-JavaScript/`, `8-React/`)
  - 기존 파일들의 최대 숫자 prefix + 1 (예: React 폴더에 마지막이 `28-useCallback.md`면 `29-새주제.md`)

### 3. 에이전트 병렬 조사 (상세한 결과 수집)

독립적인 조사 작업은 **하나의 메시지에서 Agent tool을 다중 호출**하여 병렬 실행:

**항상 실행 — `frontend-skill-explorer`**:
```
[주제] TIL 블로그 기획 단계입니다. 본문은 쓰지 말고 다음을 상세히, 꼼꼼히 제공:
1. 주제의 핵심 개념과 하위 소주제 (빠뜨리지 말 것)
2. 관련 기술/개념 (이 포스트 전후로 독자가 알면 좋을 것)
3. 사전 지식 (선행으로 알아야 할 것)
4. 흔한 오해·함정 (실수하기 쉬운 지점 자세히)
구조화된 bullet 리스트로 응답.
```

**기술 정확성이 핵심인 주제 — `frontend-blog-verifier`**:
API 동작, 버전 호환성, 성능 수치 같은 사실적 주장이 많을 때 호출.
```
[주제] TIL 블로그 기획 단계입니다. 글 작성은 하지 말고 다음을 자세히 제공:
1. 반드시 참고할 공식 자료 URL (MDN, 공식 docs, RFC 등 — 직접 URL)
2. 자주 잘못 알려진 사실 / 통념 (꼼꼼히 나열)
3. 버전별 차이 (관련 있을 시)
4. 작성 시 팩트체크가 필요한 주장 리스트 (상세히)
```

**UI/시각 데모가 필요한 주제 — `frontend-ui-example-generator`**:
CSS 레이아웃, React 컴포넌트, 인터랙션 패턴 등에만.
```
[주제] 블로그에 넣을 UI 예제 아이디어를 3~5개 꼼꼼히 제안. 완성본 아니라 후보만.
어떤 사례가 직관적인지, 어떤 상태(hover/active 등)를 보여주면 좋을지 자세히.
```

알고리즘·순수 개념 포스트면 UI 에이전트 생략.

### 4. 기획서를 자세히 작성해 응답 출력

에이전트 결과를 상세히 종합해 아래 구조의 Markdown을 응답에 출력(**파일 저장은 사용자가 요청할 때만, 혹은 `/til-plan` 커맨드에서만**):

```markdown
# 📝 블로그 기획서: [주제]

## 📍 배치
- 경로: `docs/[section]/[subcategory]/[NN]-[파일명].md`
- 기존 유사 문서: [경로 링크 또는 "없음"]

## 🎯 대상 독자
- 수준: [초급/중급/고급]
- 선행 지식: [bullet로 꼼꼼히]

## 💡 핵심 메시지 (한 줄)
[독자가 읽고 얻어갈 한 문장 — 모호하지 않게]

## 📑 목차 초안
1. 개념 — [한 줄]
2. 동작 원리 — [한 줄]
3. 예제 — [한 줄]
4. 주의사항 — [한 줄]
5. 정리 — [한 줄]

## 🔍 섹션별 상세
### 1. [섹션명]
- 다룰 포인트: (자세히)
- 코드 예제: [필요/불필요, 어떤 예제]
- 시각 자료: [필요/불필요]
...

## 📚 참고 자료 (권위 있는 출처)
- [URL]

## ⚠️ 작성 시 검증 필요 항목
- [팩트체크 대상 주장을 빠뜨리지 말고]

## 🎨 예제/시각 자료 후보 (해당 시)
- [UI 에이전트 제안을 꼼꼼히 반영]

## 🚫 이번 포스트 범위 밖
- [스코프 밖 주제 — creep 방지]

## ➡️ 다음 단계
기획 승인하시면 `/til-write plan/<파일명>.md`로 본문 작성을 진행합니다.
(파일로 저장하려면 `/til-plan <주제>` 커맨드를 이용하세요.)
```

### 5. 사용자 승인 대기

기획서 제시 후 사용자 피드백 대기. **명시적 승인 전까지 본문 작성 금지**.

## 작업 규칙

- **본문 작성 절대 금지**: 이 skill은 기획까지만. 예제 코드도 아이디어 수준으로만.
- **한국어 콘텐츠**: 제목·설명 한국어, 코드·기술 용어는 영어 그대로.
- **네이밍 규칙**: 파일명은 `NN-주제.md` (숫자 prefix가 사이드바 정렬 결정).
- **에이전트 병렬 실행**: 독립적인 조사는 한 메시지에서 다중 Agent tool 호출.
- **스코프 분할**: 목차가 7개 이상이면 2~3개 포스트로 나누는 안도 함께 자세히 제시.
- **기존 문서 우선**: 비슷한 기존 문서가 있으면 새로 만들기보다 보완을 먼저 제안.
- **self-review 필수**: 기획서 제시 전 누락·모순·불명확한 부분이 없는지 꼼꼼히 2회 이상 점검.