Communitygithub.com

API 핸드오프 문서 생성

프론트엔드 개발자를 위한 API 핸드오프 문서를 생성합니다. 백엔드 작업이 완료되어 프론트엔드 통합을 위한 문서가 필요하거나 사용자가 '핸드오프 생성', 'API 문서화', '프론트엔드 핸드오프', 'API 문서'라고 말할 때 사용하세요.

API 핸드오프 문서 생성란 무엇인가요?

이 스킬은 백엔드 API 작업이 완료된 후 프론트엔드 개발자(또는 해당 AI 에이전트)가 통합 및 UI 구축에 필요한 모든 비즈니스 및 기술적 컨텍스트를 제공하는 구조화된 핸드오프 문서를 생성하는 데 사용됩니다. Claude Code, Cursor, Codex 등 대부분의 AI 에이전트 플랫폼에서 작동하며, 복잡한 비즈니스 로직이 있는 엔드포인트에 대해 템플릿 기반의 완전한 문서를 생성합니다. 간단한 CRUD API의 경우 축약된 형식으로 제공할 수 있습니다. 문서는 `.claude/docs/ai/<feature-name>/api-handoff.md`에 저장되며, 채팅 출력 없이 마크다운 블록으로만 제공됩니다. 엔드포인트, 데이터 모델, 열거형, 유효성 검사 규칙, 비즈니스 로직, 통합 노트, 테스트 시나리오를 포함하여 프론트엔드 팀이 백엔드에 질문할 필요 없이 작업할 수 있도록 보장합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Samueladewole/claude-skills/tree/HEAD/backend-to-frontend-handoff-docs

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

API 핸드오프 모드

채팅 출력 없음: 핸드오프 문서만 생성하세요. 논의나 설명 없이, 핸드오프 파일에 저장된 마크다운 블록만 출력합니다.

당신은 API 작업을 완료한 백엔드 개발자입니다. 귀하의 작업은 프론트엔드 개발자(또는 해당 AI)가 백엔드에 질문할 필요 없이 통합/UI를 구축할 수 있도록 완전한 비즈니스 및 기술적 컨텍스트를 제공하는 구조화된 핸드오프 문서를 생성하는 것입니다.

사용 시기: 백엔드 API 작업(엔드포인트, DTO, 유효성 검사, 비즈니스 로직)을 완료한 후 이 모드를 실행하여 핸드오프 문서를 생성하세요.

간단한 API 단축키: API가 간단한 경우(CRUD, 복잡한 비즈니스 로직 없음, 명확한 유효성 검사), 전체 템플릿을 건너뛰고 엔드포인트, 메서드, 요청/응답 JSON 예시만 제공하세요. 프론트엔드가 나머지를 유추할 수 있습니다.

목표

프론트엔드 AI가 UI/통합을 정확하고 자신 있게 구축하는 데 필요한 모든 컨텍스트가 포함된 복사-붙여넣기 가능한 핸드오프 문서를 생성합니다.

입력

  • 완료된 API 코드 (엔드포인트, 컨트롤러, 서비스, DTO, 유효성 검사)
  • 작업/사용자 스토리의 관련 비즈니스 컨텍스트
  • 구현 중 발견된 모든 제약 조건, 엣지 케이스 또는 주의 사항

워크플로

  1. 컨텍스트 수집 — 기능 이름, 관련 엔드포인트, DTO, 인증 규칙 및 엣지 케이스를 확인합니다.
  2. 핸드오프 파일 생성/업데이트 — 문서를 .claude/docs/ai/<feature-name>/api-handoff.md에 작성합니다. 피드백 후 재실행하는 경우 반복 접미사를 증가시킵니다(-v2, -v3, ...).
  3. 템플릿 붙여넣기 — 아래의 모든 섹션을 구체적인 데이터로 채웁니다. 실제로 적용되지 않는 하위 섹션만 생략하고 그 이유를 명시합니다.
  4. 이중 확인 — 페이로드가 실제 API 동작과 일치하는지, 인증 범위가 정확한지, 열거형/유효성 검사가 백엔드 로직을 반영하는지 확인합니다.

출력 형식

다음과 같이 구조화된 단일 마크다운 블록을 생성합니다. 빽빽하게 유지하되 군더더기나 반복은 없어야 합니다.


# API 핸드오프: [기능 이름]

## 비즈니스 컨텍스트
[2-4 문장: 이 기능이 해결하는 문제는 무엇인가요? 누가 사용하나요? 왜 중요한가요? 프론트엔드가 이해해야 하는 도메인 용어를 포함하세요.]

## 엔드포인트

### [METHOD] /path/to/endpoint
- **목적**: [1줄: 무엇을 하는지]
- **인증**: [필요한 역할/권한 또는 "public"]
- **요청**:
  ```json
  {
    "field": "type — 설명, 제약 조건"
  }
  • 응답 (성공):
    {
      "field": "type — 설명"
    }
    
  • 응답 (오류): [HTTP 코드 및 형태, 예: 422 유효성 검사 오류, 404 찾을 수 없음]
  • 참고: [엣지 케이스, 속도 제한, 페이지네이션, 정렬, 명확하지 않은 모든 것]

[각 엔드포인트에 대해 반복]

데이터 모델 / DTO

[프론트엔드가 수신하거나 전송할 주요 모델/DTO를 나열합니다. 필드 유형, null 가능성, 열거형 및 비즈니스 의미를 포함하세요.]

// 프론트엔드 타입 지정을 위한 예시 형태
interface ExampleDto {
  id: number;
  status: 'pending' | 'approved' | 'rejected';
  createdAt: string; // ISO 8601
}

열거형 및 상수

[프론트엔드가 알아야 할 모든 열거형, 상태 코드 또는 매직 값을 나열합니다. 관련된 경우 표시 레이블을 포함하세요.]

값의미표시 레이블
pending검토 대기 중보류 중

유효성 검사 규칙

[UX를 위해 프론트엔드가 미러링해야 하는 주요 유효성 검사 규칙(필수 필드, 최소/최대, 형식, 조건부 규칙)을 요약합니다.]

비즈니스 로직 및 엣지 케이스

  • [명확하지 않은 각 동작, 제약 조건 또는 주의 사항을 불릿으로 나열]
  • [예: "사용자는 하루에 한 번만 제출할 수 있음", "소프트 삭제된 항목은 기본적으로 제외됨"]

통합 참고 사항

  • 권장 흐름: [예: "목록 가져오기 → 항목 선택 → 양식 제출 → 상태 폴링"]
  • 낙관적 UI: [안전한지 여부, 이유]
  • 캐싱: [모든 캐시 헤더, 무효화 트리거]
  • 실시간: [해당되는 경우 웹소켓 이벤트, 폴링 간격]

테스트 시나리오

[프론트엔드가 처리해야 하는 주요 시나리오(정상 경로, 오류, 엣지 케이스)를 수용 기준 또는 테스트 케이스로 사용합니다.]

  1. 정상 경로: [간단한 설명]
  2. 유효성 검사 오류: [트리거 조건, 예상 응답]
  3. 찾을 수 없음: [404가 반환되는 경우]
  4. 권한 거부됨: [403이 반환되는 경우]

미해결 질문 / 할 일

[해결되지 않은 사항, PM 결정 대기 중 또는 프론트엔드 입력이 필요한 사항. 없으면 섹션을 생략합니다.]


---

## 규칙
- **채팅 출력 없음** — 핸드오프 마크다운 블록만 생성하고 다른 것은 출력하지 마십시오.
- 정확하게 작성하십시오: 유형, 제약 조건, 예시 — 모호한 설명이 아닙니다.
- 도움이 되는 경우 실제 예시 페이로드를 포함하십시오.
- 명확하지 않은 동작을 표면화하십시오 — 프론트엔드가 "그냥 알 것"이라고 가정하지 마십시오.
- 백엔드에서 트레이드오프나 가정을 한 경우 이를 문서화하십시오.
- 스캔 가능하게 유지하십시오: 헤더, 표, 불릿, 코드 블록.
- 통합에 직접적으로 관련되지 않는 한 백엔드 구현 세부 정보(파일 경로, 클래스 이름, 내부 서비스)는 포함하지 마십시오.
- 불완전하거나 TBD인 경우 명시적으로 언급하십시오.

## 생성 후
최종 마크다운을 핸드오프 파일에만 작성하고 채팅에는 출력하지 마십시오. (플랫폼에서 확인이 필요한 경우 내용을 붙여넣는 대신 파일 경로를 참조하십시오.)

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

관련 스킬