v1.0 · 2026-09-18
AI 스킬 설치
ARC 규칙을 AI 코딩 도구(Claude Code)가 알아서 따르게 하는 설명서 파일이에요. 한 번 설치하면 "ARC", "리바운드", 템플릿 URL이 나오는 작업에서 자동으로 적용돼요.
1. 설치 (개인)
터미널에 붙여 넣으면 홈 폴더에 설치돼요. 모든 프로젝트에서 쓰여요.
mkdir -p ~/.claude/skills/arc-design && curl -fsSL https://gb-design-7ob.pages.dev/skill/SKILL.md -o ~/.claude/skills/arc-design/SKILL.md && echo "ARC 스킬 설치 완료"
Claude Code 안에서 하려면 이렇게 말해도 돼요: "https://gb-design-7ob.pages.dev/skill/SKILL.md 를 ~/.claude/skills/arc-design/SKILL.md 로 설치해 줘"
2. 설치 (저장소, 권장)
rebound-biz 저장소 안에 두고 커밋하면 팀 전체가 설치 없이 같은 버전을 써요. 규칙이 바뀌면 PR 하나로 갱신돼요.
mkdir -p .claude/skills/arc-design && curl -fsSL https://gb-design-7ob.pages.dev/skill/SKILL.md -o .claude/skills/arc-design/SKILL.md
3. 갱신
같은 명령을 다시 실행하면 덮어써져요. 스킬 안에 "작업 전 최신본 버전 확인" 규칙이 있어서, 오래된 파일이어도 AI가 스스로 새 버전을 읽어요.
4. 쓰는 법
- 문서에서 만들 화면과 가장 가까운 컴포넌트나 템플릿을 고르고 URL을 복사해요.
- Claude Code에 붙여요. "https://gb-design-7ob.pages.dev/templates/form-grid.html 이 템플릿으로 이벤트 결제 페이지 만들어 줘"
- AI가 구조 → 토큰 → 컴포넌트 순서로 만들고, 마지막에 체크리스트로 스스로 점검해요. 구조가 요청과 다르면 먼저 물어봐요.
5. 함께 쓰는 파일
Tailwind에 붙이기: module.exports = { presets: [require('./tailwind.arc.preset')], … }
6. 스킬 안에 있는 것
- 시작 절차 — 템플릿 URL을 받으면
.md를 먼저 읽고 구조 → 토큰 → 컴포넌트 순서로 - 절대 규칙 아홉 — 오렌지 한 곳, 입력·선택은 파랑, 카드 테두리 없음, Neutral 기본 버튼, 라운드 넷, 표 왼쫁 정렬, 글로우 금지, 문구 톤
- 토큰 표 · 글자 계열 · 레이아웃 치수 · 컴포넌트 29개 요약과 문서 링크 · 코드 관습 · 물어봐야 하는 순간 · 끝내기 전 체크리스트