hia-frontend-claude-config

HIA 프로젝트 공통 Claude Code 설정 패키지.

여러 프로젝트에서 동일한 Claude 규칙·가이드·스킬을 유지하기 위해 사용한다.

동작 방식

pnpm hia-claude init 을 최초 1회 실행하면 .claude/ 하위에 심볼릭 링크가 생성된다.

.claude/rules   →  node_modules/hia-frontend-claude-config/rules/
.claude/guides  →  node_modules/hia-frontend-claude-config/guides/
.claude/skills/<name>/SKILL.md  →  node_modules/hia-frontend-claude-config/skills/<name>/SKILL.md

이후 pnpm install 만으로 패키지 업데이트가 자동 반영된다. 별도 sync 스크립트 불필요.

소비 프로젝트에서 설정하기

1. 패키지 설치

pnpm add -D hia-frontend-claude-config

2. 초기화 실행 (최초 1회)

pnpm hia-claude init

실행하면 다음이 진행된다:

1. .claude/rules → 패키지 rules/ 심볼릭 링크
2. .claude/guides → 패키지 guides/ 심볼릭 링크
3. .claude/skills/*/SKILL.md → 패키지 skills/*/SKILL.md 심볼릭 링크
4. 각 스킬의 *.project.md 템플릿 파일 생성 (이미 존재하면 건드리지 않음)

🚀 Claude 설정 초기화 중...

  ✓ .claude/rules/  → node_modules/hia-frontend-claude-config/rules/
  ✓ .claude/guides/ → node_modules/hia-frontend-claude-config/guides/
  ✓ .claude/skills/ → node_modules/hia-frontend-claude-config/skills/ (SKILL.md 심볼릭 링크)

📝 프로젝트 컨텍스트 파일 생성됨 (내용을 채워주세요):
     .claude/skills/figma-to-code/figma-to-code.project.md

✅ Claude 설정 초기화 완료!
   이후 pnpm install 만으로 규칙 업데이트가 자동 반영됩니다.

3. .gitignore 추가

심볼릭 링크는 커밋하지 않는다. 프로젝트 고유 *.project.md 파일은 커밋 대상.

# Claude config (심볼릭 링크 — auto-generated by hia-frontend-claude-config)
# 프로젝트 고유 *.project.md 파일은 커밋 대상
.claude/rules
.claude/guides
.claude/skills/*/SKILL.md

4. 프로젝트 컨텍스트 파일 작성

init 실행 후 생성된 *.project.md 파일에 프로젝트 정보를 채운다. 이 파일은 .gitignore 대상이 아니므로 팀원과 커밋하여 공유한다.

Skills 사용하기

Claude Code에서 슬래시 커맨드로 호출한다:

/commit          # 커밋 컨벤션에 맞는 커밋 메시지 작성
/figma-to-code   # 피그마 URL → page.tsx + page.module.scss 변환

figma-to-code 스킬

Figma URL과 출력 경로를 인자로 전달하면 page.tsx + page.module.scss를 생성한다.

/figma-to-code https://figma.com/... src/app/my-page

규칙 업데이트 반영하기

pnpm update hia-frontend-claude-config
pnpm install  # 심볼릭 링크가 새 버전을 자동으로 바라봄

파일 구조

configs/claude-config/
├── bin/
│   ├── cli.js      # hia-claude <command> 진입점
│   └── init.js     # hia-claude init — 심볼릭 링크 생성 + *.project.md 템플릿 생성
├── rules/          # .claude/rules 심볼릭 링크 대상
├── guides/         # .claude/guides 심볼릭 링크 대상
└── skills/         # .claude/skills/*/SKILL.md 심볼릭 링크 대상
    ├── commit/
    │   └── SKILL.md
    └── figma-to-code/
        ├── SKILL.md
        └── figma-to-code.project.template.md  ← init 시 *.project.md 로 복사됨