👨🏻🍳 클로드 코드로 맛있는 거 많이 만들어보기
클로드 코드 Pro를 쓰다가 Max($100)로 플랜을 업그레이드하고 쓰기 시작했습니다.
Pro는 집중해서 사용하면 sonnet 4.5 모델 기준 채 2시간도 안 되서 토큰을 다 쓰더라구요.
은근 답답했습니다. 지금은 확실히 opus 4.5 모델 기준 thinking을 끄고 작업을 하면,
세션 갱신 시간 전에 토큰이 만료되는 일은 없어요. 역시 돈을 쓰면 그만큼 편하다!
그 덕에 새해를 맞이하며 해보고 싶었던 Skills 중심의 워크플로우 구축, 컨텍스트 구축을
자유롭게 하고 있는데요. 이것과 제가 실제로 만들어서 사용중인 커맨드, 에이전트, 레퍼런스 등을
관리하는 리포지토리를 만들어서 운영중입니다.
오늘은 이 claude-code-lab에 대해서 간단하게 소개하도록 하겠습니다.
☄️ 구성 요소
| 카테고리 | 개수 | 설명 |
|---|---|---|
| 🪄 Skills | 4개 | 특정 워크플로우를 자동화하는 스킬 |
| 🚄 Commands | 9개 | 자주 쓰는 프롬프트를 분리한 커맨드 |
| 📋 Rules | 1개 | 코드 스타일 가이드 |
🪄 Skills
nextjs-16
Next.js 16 App Router의 최신 패턴을 정리한 레퍼런스입니다.
params가 Promise로 바뀐 것useFormState→useActionState마이그레이션'use cache'디렉티브PageProps,LayoutProps헬퍼 타입
17개의 레퍼런스 문서가 포함되어 있어서, Next.js 16 프로젝트 작업 시 컨텍스트로 활용하면 최신 패턴을 바로 적용할 수 있습니다.
code-flow-report
코드베이스를 분석해서 인터랙티브 웹 리포트를 생성합니다.
- Routes → Controllers → Services → DB 플로우 시각화
- 클릭 가능한 다이어그램
- 초보자도 이해하기 쉬운 요약
새로운 프로젝트에 온보딩할 때, 기존 프로젝트를 오랜만에 리팩토링 할 때
구조를 파악하는 목적으로 유용합니다.
idea-plan & prd
서비스 기획 단계에서 사용하는 스킬입니다.
- idea-plan: 아이디어 기획서 작성 (컨셉, 핵심 기능, 디자인 방향)
- prd: 제품 요구사항 정의서 작성 (비즈니스 목표, 기능 요구사항, 기술 스택)
npx 패키지 배포!
스킬을 쉽게 설치할 수 있도록 npm 패키지로 배포했습니다.
실행하면 원하는 스킬을 선택해서 프로젝트의 .claude/skills 디렉토리에 설치할 수 있습니다.
# 설치 가능한 스킬 목록 보기
npx claude-code-lab list
# 특정 스킬 설치
npx claude-code-lab install nextjs-16
# 모든 스킬 한번에 설치
npx claude-code-lab install --all🚄 Commands
| 커맨드 | 용도 |
|---|---|
/review | 코드 리뷰 (버그, 보안, 성능) |
/documentation | TSDoc 문서화 |
/explain | 코드 설명 |
/make-design | 병렬 에이전트로 UI 3종 디자인 생성 |
/centralize-paths | API/이미지 경로 중앙화 |
/refactor-html-sturdy | 시맨틱 HTML + aria 속성 추가 |
/cleanup-tw-cn | Tailwind className 정리 |
/cleanup-js | 콘솔 로그, 미사용 import 정리 |
/cleanup-css-file | 미사용 CSS 클래스 정리 |
✌️ 마무리
아직 초기 단계지만 계속 업데이트하고 있습니다.
실제로 제가 프로젝트에서 사용하면서 개선하고 있어서, 실용성은 보장합니다.
유용한 내용이 있다면 마음껏 활용하세요!
