Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

백엔드 작업 완료 후 프론트엔드 개발자가 통합할 수 있도록 API 인수인계 문서를 생성합니다. '인수인계 작성', 'API 문서화', '프론트엔드 인수인계' 등의 요청 시 사용합니다.

rocketlauncher-claude-code란 무엇인가요?

이 스킬은 백엔드 API 작업 완료 시 프론트엔드 개발자(또는 해당 AI)가 추가 질문 없이 통합 및 UI를 구축할 수 있도록 구조화된 인수인계 문서를 생성합니다. Claude Code, Cursor, Codex 등 AI Agent 플랫폼에서 사용 가능하며, 엔드포인트, DTO, 유효성 검사, 비즈니스 로직 등 백엔드 구현 정보를 기반으로 마크다운 형식의 문서를 자동 작성합니다. 단순 CRUD API의 경우 전체 템플릿 없이 엔드포인트, 메서드, 예시 요청/응답 JSON만 제공하는 단축 모드를 지원합니다. 생성된 문서는 `.claude/docs/ai/<feature-name>/api-handoff.md` 파일에 저장되며, 채팅 출력 없이 파일에만 기록하는 규칙을 따릅니다.

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

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

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

문서

API 핸드오프 모드

채팅 출력 없음: 핸드오프 문서만 생성합니다. 설명이나 토론 없이 마크다운 블록만 핸드오프 파일에 저장합니다.

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

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

단순 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줄: 수행 작업]
- **인증**: [필요 역할/권한 또는 "공개"]
- **요청**:
  ```json
  {
    "field": "타입 — 설명, 제약 조건"
  }
  • 응답 (성공):
    {
      "field": "타입 — 설명"
    }
    
  • 응답 (오류): [HTTP 코드 및 형태, 예: 422 유효성 검사 오류, 404 찾을 수 없음]
  • 참고: [엣지 케이스, 속도 제한, 페이지네이션, 정렬, 비명백한 사항]

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

데이터 모델 / DTO

[프론트엔드가 수신하거나 전송할 주요 모델/DTO를 나열. 필드 타입, null 허용 여부, 열거형, 비즈니스 의미 포함]

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

열거형 및 상수

[프론트엔드가 알아야 할 열거형, 상태 코드, 매직 값을 나열. 해당하는 경우 표시 레이블 포함]

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

유효성 검사 규칙

[프론트엔드가 UX를 위해 반영해야 하는 주요 유효성 검사 규칙 요약 — 필수 필드, 최소/최대, 형식, 조건부 규칙]

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

  • [비명백한 동작, 제약 사항, 주의 사항을 각각 불릿으로]
  • [예: "사용자는 하루에 한 번만 제출 가능", "소프트 삭제된 항목은 기본적으로 제외"]

통합 참고 사항

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

테스트 시나리오

[프론트엔드가 처리해야 할 주요 시나리오 — 정상 경로, 오류, 엣지 케이스. 승인 기준 또는 테스트 케이스로 사용]

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

미해결 질문 / TODO

[미해결 사항, PM 결정 대기 중, 프론트엔드 의견 필요 사항. 없으면 섹션 생략]


---

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

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

Individual skills in this repo

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

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

관련 스킬