frontend-testing-debugging · OpenAI · Codex
실제 화면과 콘솔 오류를 확인하며 웹앱 문제를 좁힙니다.
웹 화면이 깨지거나 사용자가 특정 순서로 조작할 때 문제가 생기는 경우에 맞는 스킬입니다. 화면과 콘솔 오류를 함께 보며 재현 조건을 좁힙니다.
실행 주소와 발생 순서를 전달해보세요. 어떤 레이아웃이나 동작이 예상과 달라졌는지 확인하고 수정 후 같은 흐름을 다시 점검하는 데 활용할 수 있습니다.
“작은 화면에서 검색 버튼이 겹쳐 보여. 이 주소에서 문제를 재현하고 레이아웃을 고친 뒤 같은 크기로 다시 확인해줘.”
받을 수 있는 결과수정한 화면과 동작 확인 결과
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
앱 연결·MCP·보조 파일이 포함된 플러그인이에요. 아래 SKILL.md는 동작을 읽어보는 용도로도 사용할 수 있지만, 파일 하나로 앱 연결이 설치되지는 않아요.
Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 frontend-testing-debugging 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
“frontend-testing-debugging 스킬을 사용해줘. 입력 자료: 앱 실행 주소와 재현 방법”처럼 요청하세요. 위의 예시를 내 자료에 맞게 바꿔도 좋아요.
예상 결과는 ‘수정한 화면과 동작 확인 결과’입니다. 필요한 내용이 포함됐는지 확인하세요. 입력 자료의 사실·숫자와 결과를 대조하고, 부족한 부분을 이어서 요청하세요.
제작자 원본 2026-10-04 확인 · 설치 안내 2026-10-04 확인 · 실제 설치·실행 미검증
모델 사용 요금과 연결 앱 요금은 이용 중인 서비스의 정책을 따릅니다.
설치 안내 출처Codex의 Plugins에서 build-web-apps에 해당하는 플러그인을 찾아 설치하세요. 제공되는 연결 앱과 권한을 설정한 뒤 새 세션에서 frontend-testing-debugging 작업을 요청하세요. 목록에 없다면 제작자 저장소의 plugins/build-web-apps/ 구성과 설치 안내를 확인하세요. 연결된 서비스의 요금은 해당 서비스 정책을 따릅니다.
원문 재배포 허용을 확인하지 못한 항목은 지원 환경의 설치 안내를 제공합니다.
Codex와 해당 플러그인이 필요합니다. 연결형 스킬은 대상 앱 계정과 접근 권한을 준비하세요. 포함 플러그인: build-web-apps.
OpenAI 플러그인 저장소 원본 확인안내에 표시된 앱에서 설치하세요. 설치·실행 검증은 별도입니다.