麒麟 / 奇安信 프런트엔드 호환성 개발
사용 원칙
호환성을 이번 구현의 제약 조건으로 삼고, 페이지를 완성한 후에 색상을 보정하지 않습니다. 이 Skill은 신규 개발, 버그 수정, 의존성 업그레이드 및 리뷰에 적용됩니다. 특정 프레임워크를 요구하지 않습니다. 작업과 관련된 위험만 처리하며, 전체 프로젝트를 무조건 재작성하지 않습니다.
모든奇安信 버전을 포괄한다고 보장할 수 없습니다. 제품 번호, 배포 채널 및 Chromium 커널 버전이 다릅니다. 동일한 커널이라도 CPU, 드라이브 및 엔터프라이즈 정책에 따라 다르게 동작할 수 있습니다. 알려지지 않은 정보는 반드시 '확인 필요'로 표시해야 하며, 검증 기록을 위조해서는 안 됩니다.
1. 먼저 지원 계약 결정
- 기존 프로젝트 지침, 잠금 파일, 빌드 설정, 호환성 테스트 및 지원 범위를 읽고 사용자 변경 사항을 유지합니다.
- 사용자, 브라우저 '정보' 페이지 및
assets/browser-probe.html에서 수집합니다: 제품 전체 이름, 제품 전체 버전, 채널, Chromium 전체 버전, Kylin 버전/SP, CPU 아키텍처, DPR/확대/축소, 폰트/GPU, 주요 엔터프라이즈 정책. UA는 단서일 뿐 실제 커널을 증명할 수 없습니다. - 프로젝트 기존 지원 매트릭스를 작성하거나 업데이트합니다. 기존 파일이 없으면
assets/support-matrix.example.json을 사용할 수 있습니다. 비즈니스 필수 기능, 최소 실제 커널, 실제 기기 및 다운그레이드 승인 기준을 기입합니다. 설치된 Skill 디렉터리에 업무 장치 데이터를 기록하지 마십시오. - 기준을 모를 경우 먼저 질문하고, 임의로 Chromium 102와 동일시하지 마십시오. 사용자가 먼저 개발을 요청하면 보수적인 기준을 임시로 설정할 수 있지만, provisional / 미검증으로 반드시 기록해야 하며 '모든 버전 호환 완료'라고 작성해서는 안 됩니다.
- 브라우저 매트릭스를 읽습니다. 채널과 아키텍처를 각각 승인합니다. 최소 기준과 더 높은 버전을 모두 포함해야 하며, 최신 Chrome만 테스트하여奇安信를 대표해서는 안 됩니다.
2. 읽기 전용 감사, 최소 변경 결정
- 실제 소스 코드와 프로덕션 빌드 설정을 읽고 CSS 도구, UI 라이브러리, 브라우저/서버 진입점, 서드파티 패키지 및 배포 방식을 확인합니다.
- 변경 내용에 따라 참고 자료를 선택적으로 읽습니다. 매번 모든 파일을 로드할 필요는 없습니다:
| 작업 | 필독 |
|---|---|
| 스타일, Tailwind, 레이아웃, 테마, 모달 | CSS 및 레이아웃 |
| JS/TS, 문법 컴파일, 의존성, Web API | JavaScript 및 빌드 |
| 폰트/입력기, 파일, PDF, 권한, 네트워크, CPU/GPU | Kylin 플랫폼 및 배포 |
| 테스트, 스크린샷, 릴리스 승인, 데이터 경계 | 검증 및 승인 |
| 기능 지원 또는 버전 근거 확인 | 출처 및 증거 수준 |
- Skill 실제 설치 경로에서 검사기를 실행합니다.
<skill-dir>은 현재SKILL.md가 있는 디렉터리를 나타냅니다. 확인된 실제 경로로 먼저 바꾸고, 자리 표시자를 그대로 사용하지 마십시오:
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102
지원 계약이 102로 결정된 경우에만 예제의 102를 사용합니다. 결정되지 않은 경우 --min-chromium을 생략하면 출력에 unknown이 표시됩니다. 경로는 실제 프로젝트에 맞게 바꿉니다. 검사기는 읽기 전용이며, 서드파티 의존성이 없고, 코드를 수정하지 않습니다. 이는 어휘 기반 후보 검출기이며, AST, CSS 컴파일러 또는 호환성 인증이 아닙니다.
3. 구현 규칙
CSS
- 안정적인 경로에는 일반 hex/rgb/hsl, 전통적인
transform, 폴백 가능한 레이아웃을 우선 사용합니다. 최신 기능은 대상이 지원하거나 점진적 향상이 입증된 경우에만 사용합니다. - 102 대상:
:has(), 컨테이너 쿼리, 새로운 뷰포트 단위, 독립 변형, 현대 색상, 네이티브 중첩, Popover 및 Tailwind 생성 코드를 중점적으로 확인합니다. 지원 임계값 및 대안은 CSS 참조를 참조하십시오. - Tailwind v4 공식 최소 Chrome 111; 102는 지원 범위에 포함되지 않습니다. 팔레트 패치, Autoprefixer 또는 JS target 설정만으로 v4 호환성 문제를 모두 해결할 수 있다고 주장해서는 안 됩니다. 지원되는 솔루션 또는 검증된 산출물 변환을 제안합니다. 마이그레이션/다운그레이드 의존성은 먼저 확인한 후에야 실행할 수 있습니다.
var()의 폴백은 현대 색상 폴백과 동일하지 않습니다.CSS.supports()는 실제 픽셀 정확도와 동일하지 않습니다. 각각 구문 분석, 계산된 값 및 시각적 결과를 확인합니다.- 모달 위치를 변경할 때 애니메이션 및 드래그 변형 컴포지션을 유지합니다. 오버레이, 포커스, 스크롤, 키보드, Portal 및 쌓임 맥락을 확인하고, 가운데 정렬 스크린샷만 확인하지 않습니다.
JS / 의존성
- 문법 변환, 내장 객체 폴리필 및 권한/네이티브 플랫폼 지원이 필요한 Web API를 구분합니다. TypeScript
target,lib, 빌드target은 서로 대체할 수 없습니다. - 브라우저 전달 체인에 대해 실제 최소 커널을 설정하고, 의존성, 동적 청크, 워커, 서드파티 스크립트 및 CSS 산출물을 확인합니다. Node 서버 측 API를 브라우저 API로 사용할 수 없습니다.
- 새 API는 진입점에서 기능 감지를 수행하고, 비즈니스에서 수용 가능한 다운그레이드를 적용합니다. 구문 분석 실패는 감지 이전에 발생하므로, 새 구문을
if로 감싸는 것으로 변환을 대체할 수 없습니다. - 선택적 체이닝 등 이미 지원되는 기능을 blanket 비활성화하지 않고, 모든 폴리필을 기본적으로 완성하지도 않습니다. 호환성을 위해 CSP, 인증서 검증, 샌드박스 또는 기타 보안 조치를 해제하지 마십시오.
플랫폼 / 데이터
- 폰트 누락, 중국어 입력기 합성 이벤트, 아키텍처 차이, GPU, 다운로드/인쇄, 파일 이름, 프록시/인증서, 오프라인 배포 및 엔터프라이즈 권한 정책을 다룹니다.
- 외부/AI 데이터를 다룰 때는 경계에서 실제 스키마를 검증하고 명확한 실패/누락 상태를 표시합니다. 알 수 없는 점수를 자동으로 유효한 점수로 채우거나 특정 검증 라이브러리를 강제로 도입하지 마십시오. 브라우저와 관련 없는 비즈니스 변경 사항은 범위를 확장하지 않습니다.
4. 검증 순서
- 소스 코드 위험 스캔, 기존 단위 테스트 및 린트. 스캔되지 않은 디렉터리, 오탐 및 수동 면제 사유를 확인합니다.
- 프로덕션 빌드. 실제 게시된 CSS/JS 스캔 (
--include-build사용, 경로가 소스 맵 또는 Node 서버 패키지가 아님을 확인). 변환/다운그레이드의 실제 출력을 기록하고, 구성만으로 유효성을 추론하지 않습니다. - 대상 브라우저에서 오프라인 프로브를 열고, 수동으로 시각적 영역을 확인한 후 실제 프로젝트의 주요 흐름에 접근합니다. 프로브는 프로젝트 테스트와 동일하지 않으며, 계정이나 업무 입력을 수집하지 않습니다.
- 최소 기준, 기존 버전 및 현재 버전의 실제 Kylin 단말을 기준으로 참조 문서의 기능/스크린샷/키보드/입력기/확대/축소/인쇄 승인을 수행합니다. 일반 Chrome, Playwright의 최신 Chromium 또는 위조된 UA는 대상 실제 기기를 대체할 수 없습니다.
- 실제 기기가 없거나, 의존성 설치 권한이 없거나, 빌드가 실패한 경우, 차단 사항과 검증되지 않은 항목을 명확히 기록하고, 가짜 스크린샷/성공 결론을 생성하지 않습니다.
# 예시일 뿐: 프로젝트 실제 브라우저 산출물 디렉터리로 바꾸십시오
python3 "<skill-dir>/scripts/compat_audit.py" ./dist --include-build --min-chromium 102 --format json
# 선택적으로 모든 후보 위험에 대해 CI 게이트를 설정할 수 있습니다. 먼저 오탐 및 증거가 있는 점진적 향상을 처리합니다
python3 "<skill-dir>/scripts/compat_audit.py" ./src --min-chromium 102 --fail-on warning
5. 전달 형식
간결한 출력:
- 지원 계약: 실제 버전/아키텍처, 최소 커널; unknown/provisional은 반드시 명시.
- 수정 사항 및 근거: 문제, 위치, 다운그레이드/변환 방식; 코드 참조 시
path:line사용. - 검증 결과: 소스 코드, 산출물, 일반 브라우저, Kylin 실제 기기를 각각 pass/fail/not-run으로 작성. 하나의 '통과'로 통합하지 않음.
- 잔여 위험: 검증할 수 없는 버전, 정책/하드웨어 제한 및 사용자 확인이 필요한 트레이드오프.
Skill 설명은 자동 매칭에 사용됩니다. 매번 트리거해야 하는 경우, 해당 프로젝트의 Agent 지시문에서 관련 개발 전에 이 Skill을 로드하도록 명시해야 합니다. Skill 자체는 호스트 검색 메커니즘을 대체할 수 없으며, 권한을 우회하거나 모델 호출을 강제할 수 없습니다.