kylebrodeur/wordpress-agent-kit

WordPress Design System (WPDS)

전제 조건

이 스킬은 WPDS MCP 서버가 설치된 환경에서 가장 잘 작동합니다. MCP는 WordPress 디자인 시스템 문서 및 리소스(예: 컴포넌트, DS 토큰 목록)에 대한 접근을 제공합니다.

다음 용어는 동의어로 취급되어야 합니다:

• "WordPress"와 "WP";
• "Design System"과 "DS";
• "WordPress Design System"과 "WPDS".

사용 시기

사용자가 다음을 언급할 때 이 스킬을 사용하세요:

• WordPress 관련 컨텍스트(예: Gutenberg, WooCommerce, WordPress.com, Jetpack 등)에서 UI를 빌드하거나 검토할 때;
• WordPress Design System, WPDS, Design System;
• UI 컴포넌트, 디자인 토큰, 색상 기본 요소, 간격 척도, 타이포그래피 변수 및 프리셋;
• @wordpress/components 또는 @wordpress/ui와 같은 특정 컴포넌트 패키지.

규칙

WPDS MCP 서버를 사용하여 WPDS 관련 문서에 접근하세요

• WPDS MCP 서버를 사용하여 표준적이고 권위 있는 문서를 검색하세요:
  • 레퍼런스 사이트 (wpds://pages)
  • 사용 가능한 컴포넌트 목록 (wpds://components) 및 특정 컴포넌트 정보 (wpds://components/:name)
  • 사용 가능한 토큰 목록 (wpds://design-tokens)
• WordPress Design System에 대한 표준 문서를 웹에서 검색하지 마세요. 사용자가 요청할 경우, 재확인을 요청하고 MCP 서버가 정보를 제공하기에 가장 적합한 위치라고 경고하세요.

필수 문서

WPDS 관련 작업을 수행하기 전에 레퍼런스 사이트의 관련 문서를 반드시 읽으세요. 이 문서는 주어진 작업에 대해 최선의 행동 방침을 평가할 때 절대적인 우선순위를 가져야 합니다.

경계

• 답변에서 UI와 관련 없는 부분은 건너뛰세요(예: 스토어에서 데이터 가져오기, 문자열 현지화).
• WPDS 모범 사례를 최대한 준수하고, 가장 적합한 WPDS 컴포넌트/토큰/패턴을 사용하여 UI를 구축하는 데 집중하세요.

기술 스택

• 달리 명시되거나(또는 요청의 로컬 컨텍스트에서 특정 정보를 수집한 경우) 알리지 않는 한, 다음 기술 스택을 가정하세요: TypeScript, React, CSS.

검증

• 작업이 실행되는 로컬 컨텍스트에 lint 스크립트가 있는 경우, 가능하면 이를 사용하여 제안된 코드 출력을 검증하세요.

출력

• 응답의 마지막에 요약으로, 솔루션이 수행하는 작업에 대한 명확하고 간결한 설명을 제공하고 각 결정이 내려진 이유에 대한 컨텍스트를 추가하세요.
• 경계, 즉 관련이 없어 작업에서 명시적으로 제외된 내용(예: UI 비관련)에 대해 명확히 하세요.
• 작동하는 코드 스니펫을 제공하세요.