lint-design-figma

lint-design-figma — ノードツリーに対する WCAG 2.2 ＋ デザインシステムの lint

Figma のノード（または現在のページ全体）を走査し、アクセシビリティとデザイン品質の問題を一度に報告します。すべて use_figma 経由で実行されるため、あらゆる Figma プランで動作し、生成コードではなく実際のデザイン（正確な色、実際のオートレイアウト、実際のバリアント名）を検査します。

独自性： ネイティブの Figma MCP（get_design_context、get_metadata など）はコード生成のためにデザインを読み取りますが、lint は行いません。デザイン側には「これはアクセシブルか／トークンに準拠しているか？」を確認する組み込み機能がありません。このスキルは、WCAG 2.2 の 14 ルールとデザインシステム／レイアウトの 6 ルールを忠実に移植し、そのギャップを埋めます。

スキルの範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。Figma Plugin API の完全なリファレンスです。これらのスクリプトで必要となる要点：トップレベルの await と return を使ったプレーンな JS（IIFE は不可、figma.closePlugin() は使わない。console.log の出力は返されません）、各スクリプトの先頭で入力を const としてインライン指定、色は 0～1 の範囲、テキスト操作の前にフォントを読み込む、await figma.getNodeByIdAsync(...) を使う、アトミックなエラー処理（スクリプトに失敗すると何も適用されません。エラーを読み、修正して再試行してください）。
• コンポーネントごとの詳細なスコアカード（状態の網羅性、色覚シミュレーション、0～100 のスコア）→ audit-accessibility-figma を使用します。
• コード側の a11y（生成された HTML に対する axe-core）→ scan-code-accessibility-figma を使用します。
• デザインとコードの差異 → check-design-parity-figma を使用します。

ワークフロー

1. 対象範囲を選びます。 ユーザーの選択範囲または URL から、対象の NODE_ID（フレーム、コンポーネントセット、または画面）を取得します。現在のページ全体を lint する場合は null のままにします。
2. ルールを選びます。 RULES のデフォルトは ['all'] です。ノイズを減らすには、グループ（'wcag'、'design-system'、'layout'）または特定のルール ID（例：'wcag-contrast'）に絞ります。カタログ全体は references/lint-rules.md にあります。
3. 実行します。 scripts/lint-design.js を use_figma 経由で実行します（skillNames: "lint-design-figma"）。先に冒頭の const 入力を編集してください。
4. 重大度に応じて優先順位を付けます。 結果はルールごとに検出事項をまとめ、それぞれに severity（critical／warning／info）と wcagLevel（a／aa／aaa／best-practice／design-system）が含まれます。まず critical（コントラスト、ターゲットサイズ、フォーカス、色のみでの表現）に対応します。
5. 修正して再度 lint します。 修正を適用し（manage-variables-figma、figma-use などを使用）、同じ対象範囲で再実行して summary.total が減ったことを確認します。各検出事項には問題のある node.id が含まれているため、該当箇所へ直接移動できます。

主なルール

• 色は 0～1 の浮動小数点数です。 コントラスト計算には sRGB の線形化と相対輝度を使用します。スクリプトには独自のヘルパーが組み込まれているため、入力に hex は不要です。
• 背景色は祖先をたどって最も近い単色塗りを推定します（デフォルトは白）。半透明の塗りに対するコントラストには approximate: true のフラグが付きます。
• MAX_DEPTH（デフォルト 10）と MAX_FINDINGS（デフォルト 100）で走査を制限します。truncated が設定されている場合は、対象範囲を絞るか上限を引き上げてください。
• WCAG に忠実な重大度： テキストサイズ、行の高さ、文字間隔／段落間隔など、一部のルールは WCAG の明確な不適合ではなく best-practice としてラベル付けされています。各ルールの詳しい理由は lint-rules.md を参照してください。
• 検出事項は説明のみで、自動修正は行いません。デザインを一括編集する前に、意図を確認してください。