麒麟 / 奇安信フロントエンド互換性開発
使用原則
互換性を今回の実装の制約として捉え、ページを完成させてから後付けで色を調整するようなことはしないでください。このスキルは、新規開発、障害修正、依存関係のアップグレード、レビューに適用されます。特定のフレームワークを要求するものではありません。タスクに関連するリスクのみを処理し、プロジェクト全体を無条件に書き換えることは行いません。
すべての奇安信バージョンをカバーできるわけではありません。 製品番号、リリースチャネル、Chromiumカーネルバージョンは異なります。同じカーネルでも、CPU、ドライバ、および企業ポリシーが異なれば動作も異なる可能性があります。不明な情報は「確認待ち」とマークし、検証記録を偽装してはいけません。
1. まずサポート契約を確定する
- 既存のプロジェクトの指示、ロックファイル、ビルド構成、互換性テスト、およびサポート範囲を読み取り、ユーザーの変更を保持します。
- ユーザー、ブラウザの「概要」ページ、および
assets/browser-probe.htmlから、製品の正式名称、完全なバージョン、チャネル、完全なChromiumバージョン、Kylinバージョン/SP、CPUアーキテクチャ、DPR/ズーム、フォント/GPU、主要な企業ポリシーを収集します。UAは手がかりにすぎず、実際のカーネルを証明するものではありません。 - プロジェクトの既存のサポートマトリックスを作成または更新します。既存のファイルがない場合は、
assets/support-matrix.example.jsonを使用できます。ビジネスに必須の機能、最小の実際のカーネル、実機および段階的低下の受け入れ基準を記入します。インストールされたスキルディレクトリに業務用デバイスのデータを記録しないでください。 - ベースラインが不明な場合は、まず確認を求め、Chromium 102と勝手に同一視しないでください。ユーザーが先に開発を要求する場合は、暫定的に保守的なベースラインを設定できますが、provisional / 未確認 と記録する必要があり、「すべてのバージョンに互換性あり」と書いてはいけません。
- ブラウザマトリックス を読み取ります。チャネルとアーキテクチャが異なる場合は、それぞれ受け入れテストを実施します。最低ベースラインとそれより高いバージョンの両方をカバーする必要があり、最新のChromeのみをテストして奇安信を代表させることはできません。
2. 読み取り専用監査、最小限の変更を特定する
- 実際のソースコードとプロダクションビルド構成を読み、CSSツール、UIライブラリ、ブラウザ/サーバーサイドのエントリポイント、サードパーティパッケージ、およびデプロイ方法を確認します。
- 変更内容に応じて参照資料を選択して読み取ります。毎回すべてのファイルをロードする必要はありません。
| タスク | 必読資料 |
|---|---|
| スタイル、Tailwind、レイアウト、テーマ、モーダル | CSS とレイアウト |
| JS/TS、構文トランスパイル、依存関係、Web API | JavaScript とビルド |
| フォント/入力メソッド、ファイル、PDF、権限、ネットワーク、CPU/GPU | Kylinプラットフォームとデリバリー |
| テスト、スクリーンショット、リリース受け入れ、データ境界 | 検証と受け入れ |
| 機能サポートまたはバージョン根拠の確認 | ソースとエビデンスレベル |
- スキルが実際にインストールされているパスからチェッカーを実行します。
<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ターゲットの設定でv4互換性のすべてを解決できると主張してはいけません。サポートされているスキームまたは検証済みの成果物変換を提案します。移行/ダウングレードの依存関係は、事前に確認してから実行し、勝手に実行しないでください。
var()のフォールバックは、任意のモダンカラーのフォールバックを意味するわけではありません。CSS.supports()は、実際のピクセル単位の正しさを意味するわけではありません。解析、計算値、および視覚的な結果をそれぞれ確認します。- モーダルの位置を変更する場合、アニメーションとドラッグのtransform合成を保持します。マスク、フォーカス、スクロール、キーボード、Portal、および重なりコンテキストをチェックし、中央揃えのスクリーンショットだけを確認しないでください。
JS / 依存関係
- 構文トランスパイル、組み込みオブジェクトのpolyfill、および権限やネイティブプラットフォームサポートが必要なWeb APIを区別します。TypeScriptの
target、lib、およびビルドのtargetは互いに代替できません。 - ブラウザに配信されるチェーンには、実際の最低カーネルを設定し、依存関係、動的chunk、ワーカー、サードパーティスクリプト、およびCSS成果物をチェックします。NodeサーバーサイドAPIをブラウザAPIとして使用してはいけません。
- 新しいAPIはエントリポイントで機能検出を行い、ビジネスが受け入れ可能なフォールバックを採用します。構文解析の失敗は検出の前に発生するため、新しい構文をトランスパイルせずに
ifで囲むことはできません。 - オプショナルチェイニングなど既にサポートされている機能をブランケットで無効にしたり、すべてのpolyfillをデフォルトで補完したりしないでください。互換性のためにCSP、証明書検証、サンドボックス、またはその他のセキュリティ対策を無効にしてはいけません。
プラットフォーム / データ
- フォント欠落、中国語入力メソッドのコンポジションイベント、アーキテクチャの違い、GPU、ダウンロード/印刷、ファイル名、プロキシ/証明書、オフラインデプロイメント、および企業権限ポリシーをカバーします。
- 外部/AIデータが関係する場合、境界で実際のスキーマに従って検証し、明確な失敗/欠落状態を表示します。未知のスコアを黙って有効なスコアに補完したり、特定の検証ライブラリを強制的に導入したりしないでください。ブラウザに関係のないビジネス変更は範囲を拡大しません。
4. 検証順序
- ソースコードのリスクスキャン、既存の単体テスト、およびlint。スキャンされていないディレクトリ、誤検出、および手動による豁免の理由を確認します。
- プロダクションビルド。実際に公開される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 を記述し、1つにまとめて「合格」としないでください。
- 残存リスク:検証できないバージョン、ポリシー/ハードウェアの制限、およびユーザーの確認が必要なトレードオフ。
スキルの説明は自動マッチングに使用されます。毎回トリガーする必要がある場合は、関連する開発の前にこのスキルをロードすることを、使用するプロジェクトのエージェント指示で明示的に要求する必要があります。スキル自体はホストの検出メカニズムを代替できず、権限をバイパスしたり、モデル呼び出しを強制したりすることもできません。