프론트엔드 준비성

$frontend-readiness diff, $frontend-readiness pr <URL>, $frontend-readiness release, $frontend-readiness full로 호출합니다.

check-readiness의 모드, 증거, 평가, 편집 규칙을 사용합니다. 직접 호출 시 해당 스킬에서 모드를 선택합니다. check-readiness에 의해 호출된 경우 선택된 대상을 유지합니다. 프론트엔드 표면만 평가합니다.

선택된 대상에 적용되는 검사 항목을 평가합니다. 범위 내 예외 사항은 N/A로 표시하고 사유를 기록합니다. 적용되지 않는 섹션(비공개 앱의 검색 및 공유, 프레임워크를 사용하지 않는 프로젝트의 프레임워크 규칙)은 검사 항목별로 하나씩이 아닌, 섹션당 한 줄의 N/A로 처리합니다.

차단 영역: 중대한 플로우 또는 경로 손상, 인증 및 권한 UI 손상, 사용자 콘텐츠의 안전하지 않은 렌더링, 시크릿 정보 유출, 중요 플로우의 접근성 실패, 데이터 기반 표면의 오류 또는 빈 상태 누락, 빌드 또는 테스트 실패. 기타 실패는 권고 사항으로 처리합니다.

정확성

모든 범위 내 경로가 직접 이동, 새로고침, 앱 내 이동, 뒤로 가기, 앞으로 가기에서 정상 렌더링됩니다.
모든 중요 플로우가 해피 패스를 완료하고 복구 가능한 실패 시 유용한 입력을 보존합니다.
폼이 입력을 검증하고, 중복 제출을 방지하며, 실행 가능한 오류를 표시하고, 보조 기술에 오류를 노출합니다.
클라이언트, 서버, URL 및 영구 상태가 새로고침, 취소, 오래된 응답 및 반복 작업에서 일관성을 유지합니다.
콘솔에 새로운 오류나 경고가 없으며, 실패한 네트워크 요청은 설명됩니다.
인증 및 권한 경계가 올바른 UI를 표시하고, 의도된 반환 경로를 유지하며, 만료된 세션, 금지된 응답 및 역할 변경을 처리합니다.

모든 데이터 기반 표면은 명시적인 상태 매트릭스를 가집니다. 발생할 수 없거나 사용자에게 의미가 없는 경우에만 상태를 N/A로 표시합니다.

빈 상태: 성공적인 데이터 결과(0개)가 발생한 상황을 설명하고 유용한 다음 작업을 제공합니다.
로딩 중: 진행 상황이 명확하고, 유용한 기존 콘텐츠는 안정적으로 유지되며, 반복 작업은 제어됩니다.
스켈레톤: 최종 레이아웃을 예측할 수 있고 지연이 인지 가능한 경우, 플레이스홀더가 레이아웃과 일치하고 레이아웃 이동을 방지합니다. 그렇지 않으면 N/A로 기록합니다.
부분: 독립적인 섹션이 로드되거나 실패하는 동안 사용 가능한 콘텐츠는 계속 사용할 수 있습니다.
오류 상태: 메시지가 실행 가능하고, 유용한 입력이 보존되며, 재시도 또는 복구가 작동합니다.

프레임워크 규칙

프로젝트에서 사용하지 않는 프레임워크 항목은 건너뜁니다. 감지된 프레임워크와 버전을 명시합니다.

프레임워크, 라우터 및 데이터 로딩 API가 설치된 버전 및 기존 프로젝트 규칙과 일치합니다. 버전 및 정보 출처를 기록합니다.
내부 탐색은 감지된 프레임워크의 링크 컴포넌트(예: next/link의 Link, @tanstack/react-router의 Link)를 사용합니다. 기본 <a>는 외부 링크, 다운로드, 이메일 및 전화 링크를 처리합니다.
경로 매개변수, 검색 매개변수, 리다이렉션 및 탐색은 프레임워크 라우터 API와 훅을 사용합니다.
정적 및 동적 스타일은 기존 프레임워크 지원 스타일링 시스템을 따릅니다. 동적 값은 라이브러리에서 요구하는 위치 지정을 위해 인라인 스타일이 필요한 경우를 제외하고 CSS 사용자 정의 속성을 사용합니다.

인터페이스 및 접근성

레이아웃이 기록된 각 뷰포트에서 의도하지 않은 오버플로우 없이 작동합니다. 긴 텍스트, 누락된 미디어, 느린 데이터 및 대규모 컬렉션도 사용 가능한 상태를 유지합니다.
계층 구조, 간격, 타이포그래피, 색상 및 인터랙티브 피드백이 일관됩니다. 컨트롤은 호버, 포커스, 활성, 비활성, 로딩 및 오류 상태를 포함합니다.
파괴적 작업은 명확한 의도를 요구하며 실용적인 경우 복구 방법을 제공합니다.
시맨틱 랜드마크, 제목, 컨트롤, 레이블 및 접근 가능한 이름이 목적과 일치합니다.
키보드만으로 모든 인터랙티브 요소에 논리적 순서로 접근 및 조작이 가능합니다. 포커스는 보이며 대화상자, 메뉴, 오류 및 경로 변경 시 올바르게 이동합니다.
텍스트 및 필수 UI는 기록된 접근성 목표(WCAG 2.2 AA, 더 엄격한 요구사항이 적용되지 않는 한)를 충족합니다. 의미가 색상에만 의존하지 않습니다.
이미지에는 적절한 대체 텍스트가 있습니다. 장식용 미디어는 침묵을 유지합니다. 확대/축소, 텍스트 크기 조정, 동작 감소 및 필요한 화면 판독기 알림이 흐름을 유지합니다.

복원력, 개인정보 보호 및 보안

사용자 제어 콘텐츠는 안전하게 렌더링되며, 시크릿 정보 및 권한이 필요한 결정은 서버 측에 유지됩니다.
외부 링크, 리다이렉션, 업로드, 저장소 및 브라우저 API는 신뢰할 수 없는 입력을 검증합니다. 외부 탭은 해당되는 경우 안전한 opener 동작을 사용합니다.
오프라인 및 타임아웃 동작이 데이터 손실을 방지합니다.
오류 UI는 민감한 내부 정보를 생략하는 반면, 로그는 충분한 진단 컨텍스트를 유지합니다.
인증 또는 개인정보 데이터 제품은 인증 및 지속적인 탐색에서 공개 이용약관 및 개인정보 보호 페이지를 노출합니다. 콘텐츠는 실제 동작과 일치해야 합니다.
애플리케이션이 제어하는 경우 쿠키, CSRF 방어, 응답 보안 헤더, 리다이렉션 및 캐시 정책이 검증됩니다.
분석, 오류 추적 및 동의는 개인정보 보호 요구사항을 준수하며 개인 또는 비밀 데이터를 노출하지 않습니다.
기능 플래그는 검증된 대상 환경 값을 가지며, 위험한 변경의 경우 문서화된 롤백 또는 비활성화 경로가 있습니다.

성능 및 에셋

대표 경로가 기록된 환경의 프로덕션 빌드에서 TTFB, LCP, INP, CLS, 첫 번째 유용한 콘텐츠 및 기본 인터랙션 타이밍으로 측정됩니다.
모든 범위 내 경로는 기록된 예산 내에서 유용한 콘텐츠 또는 실행 가능한 폴백을 표시하고 기본 인터랙션을 수락합니다. 5초는 더 엄격한 제품 예산이 없을 때만 기본값입니다.
프로덕션 빌드 출력, 경로 청크 및 네트워크 워터폴에 설명되지 않은 큰 비용이 없습니다.
변경된 성능 최적화는 측정된 이점이 있으며, 해당되는 경우 키보드, 포커스, 화면 판독기 및 오프라인 동작을 보존합니다.
이펙트는 의존성이 변경되거나 컴포넌트가 언마운트될 때 리스너, 구독, 옵저버, 보류 중인 요청, 워커, 타이머, 애니메이션 프레임 및 디바운스/스로틀된 작업을 해제합니다.
이미지는 사용 가능한 프레임워크 최적화, 반응형 크기 및 sizes, 최신 포맷, 압축, 안정적인 종횡비 및 올바른 eager/lazy 우선순위를 사용합니다. 비디오 및 폰트는 의도적인 전달, 폴백 및 사전 로드 동작이 있습니다.
서드파티, 인라인 및 차단 스크립트는 명시적인 목적과 로딩 우선순위가 있습니다.

검색 및 공유

공개 또는 공유 가능한 경로에만 적용됩니다. 인증 전용 앱은 인덱싱 방지 검사만 필요합니다.

모든 경로는 적절한 제목 및 설명 메타데이터를 정의합니다. 공개 인덱싱 가능 경로는 프레임워크 API를 통해 표준 및 로봇 의도를 설정합니다. 비프로덕션 및 보호된 환경은 실수로 인덱싱되지 않습니다.
공유 가능한 경로는 Open Graph 및 소셜 메타데이터를 절대 경로의 크롤링 가능한 값으로 해결합니다. OG 이미지는 올바른 콘텐츠 유형, 크기 및 대체 텍스트를 반환합니다. 렌더링된 태그와 실제 공유 미리보기가 검증됩니다.
릴리스 게이트의 경우, Lighthouse가 기록된 모바일 및 데스크톱 프로필의 배포된 프로덕션 경로에 대해 실행됩니다. 성능, 접근성, 모범 사례 및 SEO 결과와 회귀가 기록됩니다.

엔지니어링 및 배포

포맷터, 린트, 타입체크, 테스트 및 프로덕션 빌드가 통과하거나 명시적인 기준 실패가 있습니다.
변경된 로직은 가장 작은 유용한 자동화된 회귀 검사를 갖습니다.
환경 변수, 기능 플래그, API URL, 브라우저 지원 및 테스트 계정이 대상 환경과 일치합니다.
제품에서 요구하는 경우 오류 추적, 파비콘 및 설치 아이콘이 작동합니다.
릴리스 게이트 또는 배포에 영향을 미치는 변경의 경우, 배포된 에셋, 경로, API, 인증, 헤더, 리다이렉션 및 캐시 동작이 대상 환경에서 검증됩니다.

프론트엔드 준비성 검사