@seungyeonwoo/pickit-agent

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

설치

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와 레이아웃을 생성합니다.

수정 → 배포 방법

# 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)
• 디자인 토큰 — 색상, 모서리, 그림자, 폰트 크기 기본값
• 카테고리별 가이드 — 아우터/상의/하의 등 카테고리에 따른 디자인 방향
• 접근성 체크리스트 — 색상 대비, 터치 영역, 스크린리더 등

기타 커맨드

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