Blog

GitHub - Lazydok/cc-skills-template

Lazydok

2026.03.16

·GitHub·by 성산/부산/잡부

#Agent#AI#Automation#LLM#Multi-agent

핵심 포인트

1Claude Code의 능력을 극대화하는 'CC Skills Template'은 단일 프롬프트로 여러 AI 에이전트가 병렬 작업하고 교차검증하여 더 빠르고 정확한 결과를 만듭니다.
2이 템플릿은 Gemini CLI, Codex CLI, Gemini Image 등 다양한 전문 서브에이전트와 역할 및 아티팩트 기반 통신, 'MUST 규칙'을 포함하는 'Agent Teams'를 핵심으로 합니다.
3SaaS 랜딩페이지 자동 개선 루프 및 3-way 보안 감사와 같은 실제 사례들은 단일 에이전트 대비 획기적으로 향상된 결과 품질과 복잡한 문제 해결 능력을 입증합니다.

이 문서는 Claude Code의 기능을 극대화하기 위한 'CC Skills Template'에 대해 상세히 설명합니다. 이 템플릿은 여러 AI 에이전트가 팀을 이루어 병렬로 작업하고, 상호 교차검증하며, 단일 에이전트보다 더 빠르고 정확한 결과를 생성할 수 있도록 설계되었습니다.핵심 방법론 (Core Methodology) 서브에이전트(Subagents)와 에이전트 팀(Agent Teams)의 구분: 서브에이전트(Subagents)는 개별적인 결과를 반환하는 독립적인 작업자(worker)입니다. 예를 들어, gemini-cli 및 codex-cli는 특정 CLI 도구를 활용하여 작업을 수행하는 서브에이전트입니다. 에이전트 팀(Agent Teams)은 공유 태스크 리스트와 양방향 통신을 통해 협업하는 AI 그룹입니다. 이들은 복잡한 프로젝트를 분담하고 교차검증을 통해 결과의 신뢰도를 높입니다. agent-teams 스킬은 이러한 다중 에이전트 협업을 가능하게 하는 핵심입니다. 포함된 스킬 (Included Skills): gemini-cli: Google Gemini CLI를 서브에이전트로 사용하여 코드 리뷰, 웹 검색, 프론트엔드 분석 등을 수행합니다. codex-cli: OpenAI Codex CLI를 서브에이전트로 사용하여 독립적인 코드 분석, 로직 검증, 보안 감사 등을 수행합니다. agent-teams: 여러 에이전트를 조직하여 멀티 에이전트 팀 협업 및 교차검증 워크플로우를 구현합니다. gemini-image: Google Gemini 3.1 Flash 모델을 활용하여 UI 목업, 아이콘, 배너 등 이미지를 생성합니다. 에이전트 팀 메커니즘 (Agent Teams Mechanism): 협업 (Collaboration): 에이전트 팀은 하나의 태스크를 여러 역할로 분담하여 병렬로 처리합니다. 각 에이전트는 특정 역할을 맡아 전문적인 작업을 수행합니다. 아티팩트 기반 통신 (Artifact-based Communication): CLI 에이전트(Gemini/Codex)는 Claude Code 팀과 직접 메시지를 주고받는 대신, /tmp/xv/{task-name}/ 경로에 구조화된 아티팩트 파일을 생성하여 통신합니다. Claude Code 팀원들은 이 파일을 읽어 정보를 교환하고 작업을 진행합니다. 예시 아티팩트: plan_draft.md, claude_review.md, codex_review.md, gemini_research.md, synthesis_report.md 등. 표준 아티팩트 형식: 모든 리뷰/비평 파일은 다음 형식을 따릅니다: # [ Agent ] Review - {대상 파일명} Date: {timestamp} Status: PASS | FAIL | PASS_WITH_COMMENTS ## Findings - [ CRITICAL ] Line N: 설명 - [ HIGH ] Line N: 설명 ## Summary 1-3문장 요약 ## Verdict: APPROVE | REQUEST_CHANGES 교차검증 (Cross-Verification): 결과의 정확성과 신뢰도를 높이기 위한 핵심 단계입니다. 필수 앙상블 규칙 (MUST Rules): 작업 유형에 따라 반드시 사용해야 하는 AI 앙상블 조합을 정의합니다. 예를 들어, 복잡한 코드 분석은 Claude + Codex, 웹 UI 분석은 Claude + Gemini를 필수적으로 사용합니다. 신뢰도 판정 기준 (Reliability Judgment): 여러 에이전트의 합의 수준에 따라 신뢰도를 판단합니다: CRITICAL: 전원 합의 (반드시 수정) HIGH: 2/3 합의 (수정 권장, 불일치 원인 조사) MEDIUM: 1/3만 지적 (조사 필요, 대부분 오탐) 자동 검증 루프 (Automated Verification Loop) 및 반복적 개선: 이 템플릿의 가장 중요한 특징 중 하나는 AI가 스스로 결과물을 평가하고 개선하는 반복 루프를 자동화한다는 것입니다. DESIGN-VERIFY-REFINE 루프: (SaaS 랜딩페이지 예시에서) image-gen (Gemini Image)이 이미지를 생성합니다. ui-dev (Claude)가 이미지를 포함하여 UI를 구현합니다. e2e-runner (Claude/Playwright)가 구현된 UI의 스크린샷을 캡처합니다. vlm-judge (Gemini CLI)가 캡처된 스크린샷을 분석하여 시각 품질 점수를 산정합니다 (예: 100점 만점). synthesizer (Claude)가 종합 점수를 판정하고, 설정된 기준 점수(예: 85점)에 미달하면 image-gen과 ui-dev에게 개선 피드백을 전달하여 프롬프트와 구현을 조정하도록 지시합니다. 이 과정이 기준 점수를 통과할 때까지 자동으로 반복됩니다. 상세 활용 예제 (Detailed Use Case Example): SaaS 랜딩페이지사용자가 "우리 SaaS 제품 랜딩페이지 만들어줘"라는 간단한 프롬프트를 입력하면, 8명의 에이전트로 구성된 팀이 다음 워크플로우를 병렬로 실행하며 반복적으로 개선합니다. 팀 구성: architect (Claude): 랜딩페이지 구조 설계. image-gen (Gemini Image): 히어로 배너, 기능 아이콘 등 이미지 생성. ui-dev (Claude): HTML/CSS/JS 구현 및 이미지 배치. e2e-runner (Claude/Playwright): 데스크톱, 태블릿, 모바일 스크린샷 캡처. vlm-judge (Gemini CLI): 스크린샷 분석 및 디자인 점수 산정 (VLM: Visual Language Model). xv-gemini (Gemini CLI): 최신 랜딩페이지 트렌드 웹 검색 (교차검증 에이전트). xv-codex (Codex CLI): 코드 품질 (성능, 접근성, SEO) 독립 감사 (교차검증 에이전트). synthesizer (Claude): 종합 점수 판정 및 루프 계속/종료 결정. 워크플로우 흐름: Phase 1: 설계 + 트렌드 조사 (병렬): architect가 구조를 설계하고, xv-gemini가 최신 랜딩페이지 트렌드를 웹 검색합니다. Phase 2: 이미지 생성 (1차): image-gen이 설계와 트렌드를 반영하여 여러 이미지를 생성합니다. Phase 3: 구현: ui-dev가 생성된 이미지와 설계, 트렌드 정보를 종합하여 HTML/CSS/JS로 랜딩페이지를 구현합니다. Phase 4: E2E 스크린샷 캡처: e2e-runner가 구현된 페이지의 스크린샷을 다양한 해상도로 캡처합니다. Phase 5: 시각 품질 판정 (자동 검증 루프 시작): vlm-judge가 캡처된 스크린샷을 분석하여 '시각적 조화', '색상 일관성', '반응형 적응도' 등 여러 항목에 대한 점수를 산정하고 종합 점수를 도출합니다 (예: 76/100점). 또한, 점수 미달 시 구체적인 개선 필요 항목을 제시합니다 (예: "히어로 배너 그라데이션이 텍스트 가독성을 저해"). synthesizer가 점수를 평가하여 기준(85점)에 미달하면 루프를 계속하고, image-gen과 ui-dev에게 피드백을 전달하여 이미지 재생성 및 코드 수정을 지시합니다. 루프 예시: Round 1: 76/100점 → "히어로 배너에 어두운 오버레이 추가", "특정 기능 아이콘 재생성" 등 피드백. Round 2: 피드백 반영 후 재구현 및 재평가 → 84/100점 (여전히 미달) → "일러스트 배경색 불일치" 피드백. Round 3: 최종 피드백 반영 후 재구현 및 재평가 → 87/100점 (기준 통과!) → 루프 종료. Phase 6: 최종 교차검증 (병렬): xv-codex가 Lighthouse 점수 등을 통해 코드 품질을 독립적으로 감사합니다 (예: PASS_WITH_COMMENTS). xv-gemini가 최종 결과물이 최신 트렌드에 부합하는지 검증합니다 (예: APPROVE). 결과: 3회의 루프를 거쳐 76점에서 시작하여 87점의 최종 품질을 달성한 SaaS 랜딩페이지가 생성됩니다. 이 과정에서 이미지 생성 프롬프트는 vlm-judge의 피드백을 바탕으로 구체화되고 정교해집니다 (예: "add dark gradient overlay at bottom 30%"). 스킬 커스터마이징 (Skill Customization)SKILL.md 파일은 Claude Code의 동작을 정의하는 프롬프트로, 프로젝트 특성에 맞게 직접 편집하거나 Claude Code에게 자연어로 요청하여 최적화할 수 있습니다. 예를 들어, 특정 언어/프레임워크(Django+React, FastAPI, Next.js, Spark/Airflow, Flutter)에 특화된 팀원 구성, 코드 리뷰 항목, 워크플로우 단계를 추가하거나 수정할 수 있습니다. 이를 통해 개발자는 자신의 개발 환경에 맞는 최적화된 AI 에이전트 워크플로우를 구축할 수 있습니다. 또한 .claude/skills/ 디렉토리를 Git으로 버전 관리하여 팀원 간 최적화된 워크플로우를 공유할 수 있습니다.

Blog

GitHub - Lazydok/cc-skills-template

Lazydok

2026.03.16

·GitHub·by 성산/부산/잡부

#Agent#AI#Automation#LLM#Multi-agent

핵심 포인트

1Claude Code의 능력을 극대화하는 'CC Skills Template'은 단일 프롬프트로 여러 AI 에이전트가 병렬 작업하고 교차검증하여 더 빠르고 정확한 결과를 만듭니다.
2이 템플릿은 Gemini CLI, Codex CLI, Gemini Image 등 다양한 전문 서브에이전트와 역할 및 아티팩트 기반 통신, 'MUST 규칙'을 포함하는 'Agent Teams'를 핵심으로 합니다.
3SaaS 랜딩페이지 자동 개선 루프 및 3-way 보안 감사와 같은 실제 사례들은 단일 에이전트 대비 획기적으로 향상된 결과 품질과 복잡한 문제 해결 능력을 입증합니다.

이 문서는 Claude Code의 기능을 극대화하기 위한 'CC Skills Template'에 대해 상세히 설명합니다. 이 템플릿은 여러 AI 에이전트가 팀을 이루어 병렬로 작업하고, 상호 교차검증하며, 단일 에이전트보다 더 빠르고 정확한 결과를 생성할 수 있도록 설계되었습니다.핵심 방법론 (Core Methodology) 서브에이전트(Subagents)와 에이전트 팀(Agent Teams)의 구분: 서브에이전트(Subagents)는 개별적인 결과를 반환하는 독립적인 작업자(worker)입니다. 예를 들어, gemini-cli 및 codex-cli는 특정 CLI 도구를 활용하여 작업을 수행하는 서브에이전트입니다. 에이전트 팀(Agent Teams)은 공유 태스크 리스트와 양방향 통신을 통해 협업하는 AI 그룹입니다. 이들은 복잡한 프로젝트를 분담하고 교차검증을 통해 결과의 신뢰도를 높입니다. agent-teams 스킬은 이러한 다중 에이전트 협업을 가능하게 하는 핵심입니다. 포함된 스킬 (Included Skills): gemini-cli: Google Gemini CLI를 서브에이전트로 사용하여 코드 리뷰, 웹 검색, 프론트엔드 분석 등을 수행합니다. codex-cli: OpenAI Codex CLI를 서브에이전트로 사용하여 독립적인 코드 분석, 로직 검증, 보안 감사 등을 수행합니다. agent-teams: 여러 에이전트를 조직하여 멀티 에이전트 팀 협업 및 교차검증 워크플로우를 구현합니다. gemini-image: Google Gemini 3.1 Flash 모델을 활용하여 UI 목업, 아이콘, 배너 등 이미지를 생성합니다. 에이전트 팀 메커니즘 (Agent Teams Mechanism): 협업 (Collaboration): 에이전트 팀은 하나의 태스크를 여러 역할로 분담하여 병렬로 처리합니다. 각 에이전트는 특정 역할을 맡아 전문적인 작업을 수행합니다. 아티팩트 기반 통신 (Artifact-based Communication): CLI 에이전트(Gemini/Codex)는 Claude Code 팀과 직접 메시지를 주고받는 대신, /tmp/xv/{task-name}/ 경로에 구조화된 아티팩트 파일을 생성하여 통신합니다. Claude Code 팀원들은 이 파일을 읽어 정보를 교환하고 작업을 진행합니다. 예시 아티팩트: plan_draft.md, claude_review.md, codex_review.md, gemini_research.md, synthesis_report.md 등. 표준 아티팩트 형식: 모든 리뷰/비평 파일은 다음 형식을 따릅니다: # [ Agent ] Review - {대상 파일명} Date: {timestamp} Status: PASS | FAIL | PASS_WITH_COMMENTS ## Findings - [ CRITICAL ] Line N: 설명 - [ HIGH ] Line N: 설명 ## Summary 1-3문장 요약 ## Verdict: APPROVE | REQUEST_CHANGES 교차검증 (Cross-Verification): 결과의 정확성과 신뢰도를 높이기 위한 핵심 단계입니다. 필수 앙상블 규칙 (MUST Rules): 작업 유형에 따라 반드시 사용해야 하는 AI 앙상블 조합을 정의합니다. 예를 들어, 복잡한 코드 분석은 Claude + Codex, 웹 UI 분석은 Claude + Gemini를 필수적으로 사용합니다. 신뢰도 판정 기준 (Reliability Judgment): 여러 에이전트의 합의 수준에 따라 신뢰도를 판단합니다: CRITICAL: 전원 합의 (반드시 수정) HIGH: 2/3 합의 (수정 권장, 불일치 원인 조사) MEDIUM: 1/3만 지적 (조사 필요, 대부분 오탐) 자동 검증 루프 (Automated Verification Loop) 및 반복적 개선: 이 템플릿의 가장 중요한 특징 중 하나는 AI가 스스로 결과물을 평가하고 개선하는 반복 루프를 자동화한다는 것입니다. DESIGN-VERIFY-REFINE 루프: (SaaS 랜딩페이지 예시에서) image-gen (Gemini Image)이 이미지를 생성합니다. ui-dev (Claude)가 이미지를 포함하여 UI를 구현합니다. e2e-runner (Claude/Playwright)가 구현된 UI의 스크린샷을 캡처합니다. vlm-judge (Gemini CLI)가 캡처된 스크린샷을 분석하여 시각 품질 점수를 산정합니다 (예: 100점 만점). synthesizer (Claude)가 종합 점수를 판정하고, 설정된 기준 점수(예: 85점)에 미달하면 image-gen과 ui-dev에게 개선 피드백을 전달하여 프롬프트와 구현을 조정하도록 지시합니다. 이 과정이 기준 점수를 통과할 때까지 자동으로 반복됩니다. 상세 활용 예제 (Detailed Use Case Example): SaaS 랜딩페이지사용자가 "우리 SaaS 제품 랜딩페이지 만들어줘"라는 간단한 프롬프트를 입력하면, 8명의 에이전트로 구성된 팀이 다음 워크플로우를 병렬로 실행하며 반복적으로 개선합니다. 팀 구성: architect (Claude): 랜딩페이지 구조 설계. image-gen (Gemini Image): 히어로 배너, 기능 아이콘 등 이미지 생성. ui-dev (Claude): HTML/CSS/JS 구현 및 이미지 배치. e2e-runner (Claude/Playwright): 데스크톱, 태블릿, 모바일 스크린샷 캡처. vlm-judge (Gemini CLI): 스크린샷 분석 및 디자인 점수 산정 (VLM: Visual Language Model). xv-gemini (Gemini CLI): 최신 랜딩페이지 트렌드 웹 검색 (교차검증 에이전트). xv-codex (Codex CLI): 코드 품질 (성능, 접근성, SEO) 독립 감사 (교차검증 에이전트). synthesizer (Claude): 종합 점수 판정 및 루프 계속/종료 결정. 워크플로우 흐름: Phase 1: 설계 + 트렌드 조사 (병렬): architect가 구조를 설계하고, xv-gemini가 최신 랜딩페이지 트렌드를 웹 검색합니다. Phase 2: 이미지 생성 (1차): image-gen이 설계와 트렌드를 반영하여 여러 이미지를 생성합니다. Phase 3: 구현: ui-dev가 생성된 이미지와 설계, 트렌드 정보를 종합하여 HTML/CSS/JS로 랜딩페이지를 구현합니다. Phase 4: E2E 스크린샷 캡처: e2e-runner가 구현된 페이지의 스크린샷을 다양한 해상도로 캡처합니다. Phase 5: 시각 품질 판정 (자동 검증 루프 시작): vlm-judge가 캡처된 스크린샷을 분석하여 '시각적 조화', '색상 일관성', '반응형 적응도' 등 여러 항목에 대한 점수를 산정하고 종합 점수를 도출합니다 (예: 76/100점). 또한, 점수 미달 시 구체적인 개선 필요 항목을 제시합니다 (예: "히어로 배너 그라데이션이 텍스트 가독성을 저해"). synthesizer가 점수를 평가하여 기준(85점)에 미달하면 루프를 계속하고, image-gen과 ui-dev에게 피드백을 전달하여 이미지 재생성 및 코드 수정을 지시합니다. 루프 예시: Round 1: 76/100점 → "히어로 배너에 어두운 오버레이 추가", "특정 기능 아이콘 재생성" 등 피드백. Round 2: 피드백 반영 후 재구현 및 재평가 → 84/100점 (여전히 미달) → "일러스트 배경색 불일치" 피드백. Round 3: 최종 피드백 반영 후 재구현 및 재평가 → 87/100점 (기준 통과!) → 루프 종료. Phase 6: 최종 교차검증 (병렬): xv-codex가 Lighthouse 점수 등을 통해 코드 품질을 독립적으로 감사합니다 (예: PASS_WITH_COMMENTS). xv-gemini가 최종 결과물이 최신 트렌드에 부합하는지 검증합니다 (예: APPROVE). 결과: 3회의 루프를 거쳐 76점에서 시작하여 87점의 최종 품질을 달성한 SaaS 랜딩페이지가 생성됩니다. 이 과정에서 이미지 생성 프롬프트는 vlm-judge의 피드백을 바탕으로 구체화되고 정교해집니다 (예: "add dark gradient overlay at bottom 30%"). 스킬 커스터마이징 (Skill Customization)SKILL.md 파일은 Claude Code의 동작을 정의하는 프롬프트로, 프로젝트 특성에 맞게 직접 편집하거나 Claude Code에게 자연어로 요청하여 최적화할 수 있습니다. 예를 들어, 특정 언어/프레임워크(Django+React, FastAPI, Next.js, Spark/Airflow, Flutter)에 특화된 팀원 구성, 코드 리뷰 항목, 워크플로우 단계를 추가하거나 수정할 수 있습니다. 이를 통해 개발자는 자신의 개발 환경에 맞는 최적화된 AI 에이전트 워크플로우를 구축할 수 있습니다. 또한 .claude/skills/ 디렉토리를 Git으로 버전 관리하여 팀원 간 최적화된 워크플로우를 공유할 수 있습니다.

원문 보기