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 도구 설정

Cursor 설정

프로젝트 루트에 .cursorrules 파일을 생성하고 다음 내용을 추가하세요:

# PDS 사용 규칙

PDS Skills가 설치된 경우 .claude/skills/pds/ 참조

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