Conversation
프로젝트 개요, 기술 스택, 코드 컨벤션, 테스트 전략, Speckits 워크플로우, Git 워크플로우 등 AI 에이전트가 참조할 프로젝트 문서를 추가한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
기능 명세, 계획, 태스크 생성, 구현을 위한 Speckits 워크플로우 핵심 파일을 추가한다. 템플릿, 실행 스크립트, 헌법(constitution) 파일을 포함한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
frontend-fundamentals, remotion-best-practices, vercel-composition-patterns, vercel-react-best-practices 스킬을 추가한다. skills-lock.json으로 버전을 고정한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Speckits 슬래시 커맨드, pr-develop 커맨드, 권한 설정, 스킬 심볼릭 링크를 포함한 Claude Code 설정을 추가한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Speckits 워크플로우(specify, clarify, plan, tasks, analyze, implement, checklist, taskstoissues)와 pr-develop 워크플로우를 에이전트용 형식으로 추가한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Speckits 워크플로우(specify, clarify, plan, tasks, analyze, implement, checklist)를 OpenAI Codex용 프롬프트 형식으로 추가한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
|
Important Review skippedToo many files! This PR contains 176 files, which is 26 over the limit of 150. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (176)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🚀 Preview 배포 완료!
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces the 'Speckits' workflow, a comprehensive framework for specification-driven development, and adds several AI agent skills covering frontend fundamentals, Remotion best practices, and React performance patterns. The review feedback identifies multiple violations of the project's 'Constitution' regarding component declaration styles within the example code. Additionally, a bug in the shell escaping logic for agent context updates was flagged, along with a recommendation to use more robust methods for handling PR bodies in shell commands to prevent execution errors.
Comment on lines
+14
to
+20
| const Title: React.FC<{children: React.ReactNode}> = ({children}) => ( | ||
| <div style={{textAlign: 'center', marginBottom: 40}}> | ||
| <div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
프로젝트 헌법(.specify/memory/constitution.md 33행)의 '컴포넌트 정의 시 함수 선언(function declaration) 사용' 규칙을 준수해야 합니다. AI 에이전트가 프로젝트 컨벤션에 맞는 코드를 생성할 수 있도록 예제 코드를 수정하는 것이 좋습니다.
function Title({children}: {children: React.ReactNode}) {
return (
<div style={{textAlign: 'center', marginBottom: 40}}>
<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
{children}
</div>
</div>
);
}
Comment on lines
+22
to
+25
| const YAxis: React.FC<{steps: number[]; height: number}> = ({ | ||
| steps, | ||
| height, | ||
| }) => ( |
There was a problem hiding this comment.
이 컴포넌트도 프로젝트 헌법의 함수 선언 규칙을 따르도록 수정이 필요합니다. 파일 내의 다른 컴포넌트들(Bar, XAxis)도 동일하게 수정해 주세요.
function YAxis({
steps,
height,
}: {
steps: number[];
height: number;
}) {
| </div> | ||
| ); | ||
|
|
||
| export const MyAnimation = () => { |
There was a problem hiding this comment.
프로젝트 헌법의 컴포넌트 작성 규칙에 따라 화살표 함수 대신 export default function 형식을 사용해야 합니다.
Suggested change
| export const MyAnimation = () => { | |
| export default function MyAnimation() { |
Comment on lines
+52
to
+56
| const Cursor: React.FC<{ | ||
| frame: number; | ||
| blinkFrames: number; | ||
| symbol?: string; | ||
| }> = ({frame, blinkFrames, symbol = '\u258C'}) => { |
There was a problem hiding this comment.
프로젝트 헌법의 컴포넌트 작성 규칙(함수 선언 사용)을 준수하도록 수정이 필요합니다.
function Cursor({
frame,
blinkFrames,
symbol = '\u258C',
}: {
frame: number;
blinkFrames: number;
symbol?: string;
}) {
| return <span style={{opacity}}>{symbol}</span>; | ||
| }; | ||
|
|
||
| export const MyAnimation = () => { |
There was a problem hiding this comment.
프로젝트 헌법의 컴포넌트 작성 규칙에 따라 export default function 형식을 사용해야 합니다.
Suggested change
| export const MyAnimation = () => { | |
| export default function MyAnimation() { |
Comment on lines
+305
to
+307
| local escaped_lang=$(printf '%s\n' "$NEW_LANG" | sed 's/[\[\.*^$()+{}|]/\\&/g') | ||
| local escaped_framework=$(printf '%s\n' "$NEW_FRAMEWORK" | sed 's/[\[\.*^$()+{}|]/\\&/g') | ||
| local escaped_branch=$(printf '%s\n' "$CURRENT_BRANCH" | sed 's/[\[\.*^$()+{}|]/\\&/g') |
There was a problem hiding this comment.
현재 이스케이프 로직이 정규표현식 기준으로 되어 있어, sed 치환 결과물에 불필요한 역슬래시가 포함되는 문제가 발생합니다(예: Node.js -> Node\.js). 치환 문자열(replacement string)에서는 구분자(|), &, \만 이스케이프하면 됩니다.
Suggested change
| local escaped_lang=$(printf '%s\n' "$NEW_LANG" | sed 's/[\[\.*^$()+{}|]/\\&/g') | |
| local escaped_framework=$(printf '%s\n' "$NEW_FRAMEWORK" | sed 's/[\[\.*^$()+{}|]/\\&/g') | |
| local escaped_branch=$(printf '%s\n' "$CURRENT_BRANCH" | sed 's/[\[\.*^$()+{}|]/\\&/g') | |
| local escaped_lang=$(printf '%s\n' "$NEW_LANG" | sed 's/[\\&|]/\\&/g') | |
| local escaped_framework=$(printf '%s\n' "$NEW_FRAMEWORK" | sed 's/[\\&|]/\\&/g') | |
| local escaped_branch=$(printf '%s\n' "$CURRENT_BRANCH" | sed 's/[\\&|]/\\&/g') |
.agent/workflows/pr-develop.md
Outdated
|
|
||
| 6. Push current branch to remote if not already pushed. | ||
|
|
||
| 7. Create PR: `gh pr create --base develop --title "{title}" --body "{body}"` using heredoc for multi-line body. |
There was a problem hiding this comment.
PR 본문({body})에 특수문자나 따옴표가 포함될 경우 쉘 명령어가 깨질 수 있습니다. 가이드에 언급된 heredoc을 실제 명령어 예시에도 반영하거나, --body-file 옵션을 사용하는 것이 더 안전합니다.
.agents/, .claude/, .agent/, .codex/ 내 파일이 ESLint 검사 대상에 포함되어 발생하던 에러를 ignores 추가로 해결한다. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
- 컴포넌트 작성 시 화살표 함수 대신 함수 선언 방식으로 변경 (프로젝트 헌법 준수) - sed 치환 문자열 이스케이프 로직 수정 (Node.js → Node\.js 오류 방지) - pr-develop 워크플로우에 heredoc 사용 예시 명확화 Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
feat으로 고정되어 있던 이슈/브랜치 타입을 작업 종류에 따라 선택 가능하도록 변경 (feat/fix/design/docs/refactor/chore 등) Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚩 연관 이슈
closed #438
📝 작업 내용
이 PR은 AI 에이전트(Claude Code, Codex, Antigravity 등)를 활용한 개발 환경을 프로젝트에 설정합니다.
처음 접하는 분도 이해할 수 있도록 개념부터 사용법까지 상세히 설명합니다.
🤖 전체 구조 한눈에 보기
💡 핵심 개념 설명
1. Skills (스킬) — AI의 전문 지식 모듈
AI는 기본적으로 모든 걸 알지만, 깊이가 얕을 수 있습니다.
스킬은 특정 도메인의 Best Practice를 AI에게 미리 학습시켜두는 파일입니다.
예를 들어
vercel-react-best-practices스킬을 설치하면, AI가 React 컴포넌트를 작성할 때Vercel Engineering이 검증한 성능 최적화 패턴(67가지 규칙)을 자동으로 따릅니다.
스킬을 사용하지 않으면 → 일반적인 React 코드
스킬을 사용하면 → 불필요한 리렌더링 방지, 번들 최적화, 메모이제이션 패턴이 자동 적용
2. Speckits — 명세 주도 개발 워크플로우
일반적으로 AI에게 "이 기능 만들어줘"라고 하면 바로 코드를 작성합니다.
하지만 명세(Spec)가 없으면 요구사항 오해, 테스트 누락, 아키텍처 불일치가 발생합니다.
Speckits는 이를 방지하기 위해 아래 단계를 강제합니다:
각 단계가 커맨드로 분리되어 있어, 팀원이 각 단계의 결과물을 검토할 수 있습니다.
3. Constitution (헌법) — 프로젝트 고유 규칙
.specify/memory/constitution.md에 저장된 이 파일은 AI에게 다음을 알려줍니다:이 파일 덕분에 AI가 생성하는 코드가 기존 프로젝트 스타일과 일치합니다.
4. AGENTS.md — AI 진입점 문서
AI 에이전트가 프로젝트를 처음 열었을 때 가장 먼저 읽는 파일입니다.
기술 스택, 폴더 구조, 주요 명령어, Git 워크플로우를 요약해 AI가 빠르게 컨텍스트를 파악합니다.
📦 설치된 스킬 목록
🛠️ 커맨드 설명
Speckits 워크플로우 커맨드
1단계:
/speckits/specify— 명세서 작성기능 요구사항을 입력하면 구조화된 명세서(spec.md)를 생성합니다.
"무엇을 만들어야 하는가"를 문서화합니다.
2단계:
/speckits/clarify— 모호한 부분 질문명세서에서 불명확한 부분을 최대 5개의 질문으로 정리합니다.
AI가 잘못 이해한 부분을 사전에 교정할 수 있습니다.
3단계:
/speckits/plan— 구현 계획 수립명세서를 기반으로 TDD 기반 구현 계획(plan.md)을 생성합니다.
어떤 파일을 어떤 순서로 만들어야 하는지 설계합니다.
4단계:
/speckits/tasks— 태스크 분리계획을 의존성 순서대로 정렬된 실행 가능한 태스크 목록(tasks.md)으로 변환합니다.
각 태스크는 독립적으로 검토하고 실행할 수 있습니다.
5단계:
/speckits/analyze— 일관성 검증spec.md, plan.md, tasks.md 간의 불일치를 검사합니다.
구현 전에 문서 간 충돌을 사전에 발견합니다.
6단계:
/speckits/implement— 구현 실행tasks.md에 정의된 태스크를 순서대로 실행합니다.
TDD 사이클(Red→Green→Refactor)에 따라 코드를 작성합니다.
부가 커맨드
/speckits/checklist: 현재 기능에 맞는 품질 체크리스트 생성/speckits/taskstoissues: tasks.md의 태스크를 GitHub Issues로 자동 변환/speckits/constitution: 프로젝트 헌법 생성 또는 업데이트PR 커맨드
/pr-develop— develop 브랜치로 PR 자동 생성현재 브랜치에서 develop 브랜치로 PR을 자동 생성합니다.
브랜치명에서 이슈 번호를 추출해 이슈 연결, 커밋 내역 분석 후 PR 본문을 작성합니다.
🔄 전체 개발 플로우
🖥️ AI 도구별 사용법
Claude Code (
.claude/폴더 사용)설치 확인 방법: 터미널에서
claude실행스킬은
.claude/skills/폴더(.agents/skills/의 심볼릭 링크)에서 자동으로 로드됩니다.커맨드 정의는
.claude/commands/폴더에 있습니다.OpenAI Codex (
.codex/폴더 사용)설치 확인 방법:
codexCLI 설치 후 실행codex "타이머 리셋 기능을 추가해줘. .codex/prompts/specify.md의 방식으로 진행해".codex/prompts/폴더의 프롬프트 파일을 Codex에 직접 참조하거나 붙여넣어 사용합니다.각 파일은 Claude의 슬래시 커맨드와 동일한 역할을 합니다:
specify.md→ Speckits specify 프롬프트plan.md→ Speckits plan 프롬프트implement.md→ Speckits implement 프롬프트Antigravity (
.agent/workflows/폴더 사용)설치 확인 방법:
antigravityCLI 설치 후 실행# 워크플로우 파일을 직접 실행 antigravity run .agent/workflows/speckits-specify.md antigravity run .agent/workflows/speckits-plan.md antigravity run .agent/workflows/speckits-implement.md antigravity run .agent/workflows/pr-develop.md.agent/workflows/폴더의 각 파일이 Claude의 슬래시 커맨드에 대응합니다.세 도구 비교
/speckits/specify.codex/prompts/specify.md참조antigravity run speckits-specify.md/speckits/implement.codex/prompts/implement.md참조antigravity run speckits-implement.md/pr-developantigravity run pr-develop.md.claude/skills/🗣️ 리뷰 요구사항 (선택)