shadcn-best-practices · OpenAI · Codex
프로젝트 맥락에 맞춰 shadcn 컴포넌트를 추가하고 조합합니다.
shadcn 컴포넌트를 프로젝트에 추가하거나 기존 화면에 맞게 조합하는 스킬입니다. 예제를 그대로 붙이기보다 현재 디자인과 코드 구조에 맞는 구성을 다룹니다.
프로젝트와 필요한 화면 요소를 전달해보세요. 입력 폼, 메뉴, 목록처럼 함께 동작해야 하는 부분을 일관된 UI로 구성하는 데 활용할 수 있습니다.
“현재 shadcn 프로젝트에 검색 필터와 저장 목록을 추가해줘. 기존 버튼과 입력 스타일에 맞추고 필요한 컴포넌트를 조합해줘.”
받을 수 있는 결과프로젝트에 맞는 UI 구성
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
앱 연결·MCP·보조 파일이 포함된 플러그인이에요. 아래 SKILL.md는 동작을 읽어보는 용도로도 사용할 수 있지만, 파일 하나로 앱 연결이 설치되지는 않아요.
Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 shadcn-best-practices 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
“shadcn-best-practices 스킬을 사용해줘. 입력 자료: 기존 프로젝트와 필요한 화면 요소”처럼 요청하세요. 위의 예시를 내 자료에 맞게 바꿔도 좋아요.
예상 결과는 ‘프로젝트에 맞는 UI 구성’입니다. 필요한 내용이 포함됐는지 확인하세요. 입력 자료의 사실·숫자와 결과를 대조하고, 부족한 부분을 이어서 요청하세요.
제작자 원본 2026-10-04 확인 · 설치 안내 2026-10-04 확인 · 실제 설치·실행 미검증
모델 사용 요금과 연결 앱 요금은 이용 중인 서비스의 정책을 따릅니다.
설치 안내 출처Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 shadcn-best-practices 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
원문 재배포 허용을 확인하지 못한 항목은 지원 환경의 설치 안내를 제공합니다.
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
OpenAI 플러그인 저장소 원본 확인안내에 표시된 앱에서 설치하세요. 설치·실행 검증은 별도입니다.