[![npm version](https://badge.fury.io/js/@croquiscom%2Fpds.svg)](https://badge.fury.io/js/@croquiscom%2Fpds)

# PDS

**Partner Design System** - 카카오스타일 어드민 서비스들을 위한 React 기반 디자인 시스템 라이브러리

## 🚀 빠른 시작

```bash
npm install @croquiscom/pds @emotion/react @emotion/styled react react-dom
```

```tsx
import { Button } from '@croquiscom/pds';

<Button kind='primary' size='medium'>
  저장
</Button>;
```

## 📖 문서

- **[시작하기](https://storybook.kakaostyle.in/master/pds/?path=/docs/intro)** - 설치 및 기본 사용법 (Storybook)
- **AI 도구 설정** - 아래 섹션 참조

## 🤖 AI 도구 설정

### Claude Code Skills

PDS 패키지 설치 시 `.claude/skills/pds`에 자동으로 설치됩니다.

**자동 설치 조건:**
- `.claude` 디렉토리가 존재하는 경우
- `PDS_SKIP_CLAUDE_SKILLS=true` 환경변수가 설정되지 않은 경우

**수동 설치:**

```bash
npx pds-install-skills
```

**자동 설치 비활성화:**

```bash
export PDS_SKIP_CLAUDE_SKILLS=true
yarn add @croquiscom/pds
```

## 🔗 관련 링크

- **Figma**: https://www.figma.com/design/wywk2ryXpfBhqmT7gCLqA3/PDS-1.0.0
- **Storybook**: https://storybook.kakaostyle.in/master/pds/
- **GitHub**: https://github.com/croquiscom/pds
- **npm**: https://www.npmjs.com/package/@croquiscom/pds

## 👥 기여하기

PDS 개발에 참여하려면 **[개발자 가이드](https://github.com/croquiscom/pds/blob/main/docs/README.md)**를 참고하세요.

### AI(에이전트) 기여자

PDS 저장소를 편집하는 AI 에이전트(Claude Code, Codex 등)는 다음을 먼저 읽으세요:

- **[`docs/ai-contribution-guide.md`](./docs/ai-contribution-guide.md)** — 상세 규칙, 금지 패턴, 네이밍 컨벤션, PR 직전 최종 체크리스트.

> `src/ai-skills/SKILL.md`는 **PDS를 사용하는** 다른 앱의 AI를 위한 문서이며, 이 저장소를 편집할 때의 정책 출처가 아닙니다.