# @seungyeonwoo/pickit-agent

PICKIT 개발용 AI 에이전트 패키지. Claude Code에 설치하면 PICKIT 전용 커맨드와 스킬을 사용할 수 있습니다.

## 설치

```bash
npx @seungyeonwoo/pickit-agent install
```

프로젝트 폴더에서 실행하면 `.claude/` 안에 에이전트·커맨드·스킬이 설치됩니다.

## 커맨드

Claude Code에서 아래 커맨드를 사용할 수 있습니다:

| 커맨드 | 설명 |
|---|---|
| `/pickit:plan <기능>` | 기능 설계 (아키텍처, DB, API) |
| `/pickit:build <계획>` | 프론트엔드 + 백엔드 구현 |
| `/pickit:debug` | Playwright로 넛지 시나리오 테스트 |
| `/pickit:nudge-gen` | 트리거별 넛지 카피 + Rule JSON 생성 |
| `/pickit:design [shop_id]` | 넛지 위젯 디자인 (CSS, 레이아웃, 테마) |

## 넛지 위젯 디자인 수정하기

넛지 위젯의 디자인 가이드라인은 이 파일 하나에 담겨 있어요:

```
skills/pickit-nudge-design/SKILL.md
```

이 파일을 수정하면 `/pickit:design` 커맨드가 그 가이드라인대로 CSS와 레이아웃을 생성합니다.

### 수정 → 배포 방법

```bash
# 1. 이 레포 클론
git clone https://github.com/SeungYeon-Woo/pickit_agent.git
cd pickit-agent

# 2. 디자인 가이드라인 수정
# skills/pickit-nudge-design/SKILL.md 파일을 편집

# 3. 버전 올리고 배포
npm login
npm version patch
npm publish --access public
```

배포 후 사용자들이 `npx @seungyeonwoo/pickit-agent install`을 다시 실행하면 수정된 내용이 반영됩니다.

### SKILL.md 구조

SKILL.md는 Claude가 `/pickit:design` 커맨드를 실행할 때 따르는 지침서입니다.

주요 섹션:

- **위젯 구조** — 넛지 박스의 레이아웃 (icon / tag / title / body / CTA)
- **디자인 토큰** — 색상, 모서리, 그림자, 폰트 크기 기본값
- **카테고리별 가이드** — 아우터/상의/하의 등 카테고리에 따른 디자인 방향
- **접근성 체크리스트** — 색상 대비, 터치 영역, 스크린리더 등

## 기타 커맨드

```bash
npx @seungyeonwoo/pickit-agent status     # 설치 상태 확인
npx @seungyeonwoo/pickit-agent uninstall  # 제거
```