PDS

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

🚀 빠른 시작

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

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

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

📖 문서

• 시작하기 - 설치 및 기본 사용법 (Storybook)
• AI 도구 설정 - 아래 섹션 참조

🤖 AI 도구 설정

Claude Code Skills

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

자동 설치 조건:

• .claude 디렉토리가 존재하는 경우
• PDS_SKIP_CLAUDE_SKILLS=true 환경변수가 설정되지 않은 경우

수동 설치:

npx pds-install-skills

자동 설치 비활성화:

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 개발에 참여하려면 **개발자 가이드**를 참고하세요.

AI(에이전트) 기여자

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

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

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