react-best-practices · OpenAI · Codex
React·Next.js의 데이터 로딩, 렌더링과 코드 구조를 점검합니다.
React나 Next.js 앱에서 데이터 로딩과 렌더링이 비효율적으로 연결됐을 때 쓰는 개선 스킬입니다. 느리다는 느낌만으로 코드를 바꾸기보다 관련 구조와 근거를 살펴봅니다.
문제가 있는 컴포넌트와 발생 조건을 알려주세요. 데이터 요청, 화면 갱신, 코드 구성에서 개선할 지점을 찾고 어떤 변화가 도움이 되는지 설명받을 수 있습니다.
“검색어를 입력할 때 목록이 버벅여. 관련 컴포넌트를 보고 렌더링과 데이터 요청 중 어디를 개선할지 근거와 함께 정리해줘.”
받을 수 있는 결과근거가 있는 개선안
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
앱 연결·MCP·보조 파일이 포함된 플러그인이에요. 아래 SKILL.md는 동작을 읽어보는 용도로도 사용할 수 있지만, 파일 하나로 앱 연결이 설치되지는 않아요.
Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 react-best-practices 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
“react-best-practices 스킬을 사용해줘. 입력 자료: 관련 컴포넌트와 성능 문제”처럼 요청하세요. 위의 예시를 내 자료에 맞게 바꿔도 좋아요.
예상 결과는 ‘근거가 있는 개선안’입니다. 필요한 내용이 포함됐는지 확인하세요. 입력 자료의 사실·숫자와 결과를 대조하고, 부족한 부분을 이어서 요청하세요.
제작자 원본 2026-10-04 확인 · 설치 안내 2026-10-04 확인 · 실제 설치·실행 미검증
모델 사용 요금과 연결 앱 요금은 이용 중인 서비스의 정책을 따릅니다.
설치 안내 출처Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 react-best-practices 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
원문 재배포 허용을 확인하지 못한 항목은 지원 환경의 설치 안내를 제공합니다.
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
OpenAI 플러그인 저장소 원본 확인안내에 표시된 앱에서 설치하세요. 설치·실행 검증은 별도입니다.