Design Arsenal — الأداة الموحدة لتصميم الواجهات

1つのツール。1つのエントリーポイント。11のモジュール。 これは単一のスキルです — すべての処理はこのファイルを通じて実行されます。7つの世界クラスの外部ツールと4つのオリジナルモジュールは、もはや個別のスキルではなく、内部のモジュールとして、タスクに応じてMANUAL.mdをディスクから読み込んで使用します。

EXTRACT  →  TASTE  →  BUILD  →  MOTION  →  POLISH  →  VERIFY
 extract     taste     code      gsap /     impeccable   playwright-cli
 + design-tokens       react-bits  transitions
rtl-arabic (コンテキストレイヤー — アラビア語コンテンツ)
a11y (全段階をゲート)        web-vitals (全段階に予算を設定)

نظام أداة واحدة: تُنصَّب هذه المهارة مرة واحدة كأداة واحدة باسم design-arsenal، وكل ما تفعله يمر عبر هذا الملف. الأدوات السبع السابقة أصبحت وحدات داخلية (مع 4 وحدات أصلية: rtl-arabic وa11y وdesign-tokens وweb-vitals) — لا تُنصَّب منفردة ولا تظهر كأدوات مستقلة، بل تُقرأ أدلة استخدامها (MANUAL.md) من القرص عند الحاجة فقط.

🧭 モジュールディスパッチ — 最初にこの表を読んでください

タスクから1つのモジュールを特定し、そのMANUAL.mdをディスクから読み込み（パスはこのファイルからの相対パス）、それに従ってください。1つのタスクで2つ以上のモジュールをロードしないでください。

#	タスクシグナル（ユーザーの依頼）	モジュール	ディスクから読み込むファイル
1	ウェブサイトのデザインをコピー：「stripe.comからデザインを抽出」「このサイトのトークン/色/フォントは？」「このURLをTailwindテーマに変換」	extract (designlang)	`skills/extract-design/MANUAL.md`
2	構築前のアートディレクション＆アンチスロップ：「ランディングページを作成」「テンプレートっぽくないデザイン」「パレット/タイプの方向性を選ぶ」	taste (taste-skill v2)	`skills/taste/MANUAL.md`
3	既存のUIを洗練、レビュー、強化：「polish」「audit」「critique」「bolder」「quieter」「typeset」「colorize」「harden」「distill」	polish (impeccable, 24コマンド)	`skills/impeccable/MANUAL.md`
4	高度なプログラムアニメーション：「GSAP」「スクロールアニメーション」「タイムライン」「ScrollTrigger」「stagger」「ピン留め」	motion/gsap (8モジュール)	`skills/gsap/gsap-<module>/MANUAL.md`
5	すぐ使えるアニメーションReactコンポーネント：「アニメーションヒーロー」「テキストエフェクト」「アニメーション背景」「glareホバー」「スプリットスクリーン」	components (react-bits, 218個)	`skills/react-bits/CATALOG.md`
6	CSSのマイクロインタラクション＆UIモーション：「モーダルトランジション」「トースト」「通知バッジ」「スケルトンローダー」「成功チェック」「AI思考状態」	motion/transitions (43以上のスニペット)	`skills/transitions/transitions-dev/MANUAL.md`
7	確認または自動化：「ブラウザでテスト」「スクリーンショット」「フローが機能するか確認」「動画を録画」「フローをクリックして確認」	verify (playwright-cli)	`skills/playwright-cli/MANUAL.md`
8	アラビア語/RTLインターフェース：「Arabic UI」「RTL」「عربي」「right-to-left」「bidi」、アラビア語を含むすべてのコンテンツ	rtl-arabic (オリジナル)	`skills/rtl-arabic/MANUAL.md`
9	アクセシビリティ：「a11y」「accessible」「WCAG」「contrast」「aria」「screen reader」「keyboard」	a11y (オリジナル)	`skills/a11y/MANUAL.md`
10	デザイントークン：「design tokens」「DTCG」「theme tokens」「CSS variables theme」「パレットをTailwindに変換」「トークンアーキテクチャ」	tokens (オリジナル)	`skills/design-tokens/MANUAL.md`
11	パフォーマンス：「ページが遅い」「lighthouse」「core web vitals」「LCP」「INP」「CLS」「perf budget」「render-blocking」「أداء」「بطيء」「سرعة」	web-vitals (オリジナル)	`skills/web-vitals/MANUAL.md`

重複時のタイブレーカー:

新しいものを作る → 最初にtaste（方向性）、実装中にreact-bitsまたはgsap。
既存のものをリデザインする → 最初にpolishで監査/批評、新しい方向性が必要ならtaste。
純粋なマイクロインタラクション（1要素、開閉状態） → transitions（CSS、軽量）。フルシーンの振り付け、スクロール、物理 → gsap。
機械可読なトークン（JSON/DTCGファイル） → tokens。ライブサイトからの散文デザインブリーフ → extract。スクリーンショット → トークン → tokensを直接。
アラビア語コンテンツがある場合 → スタイリング前にrtl-arabicを読む（主導モジュールに関わらず）。
モーション＋アクセシビリティの質問 → a11yのreduced-motionルールが常にモーションの豊かさに優先。
モーション＋パフォーマンスの質問 → web-vitalsのメインスレッド予算が優先。アニメーションはtransform/opacityのみで出荷。
「ページが遅い」 → 最初にweb-vitals静的リント（構造的原因）、次に測定（マニュアル§8） — メトリクスを推測しない。
UI変更後 → verify（スクリーンショットで結果確認）を提案する。

🌳 ディシジョンツリー — 4つの質問でルーティング

以下の順に質問し、最初にマッチしたところで停止:

コンテンツにアラビア語（または他のRTLスクリプト）が含まれていますか？ → rtl-arabicをコンテキストレイヤーとして追加し、以下を続行。
入力は消費する既存のデザインですか？ URL → extract；スクリーンショット/モックアップ → tokens；パレットファイル → tokens。
タスクは新しいものを作成するのか、既存のものを変更するのか？ 新規 → taste → 構築（必要に応じてreact-bits/gsap/transitionsから取得）。既存 → 最初にpolish監査（/impeccable audit）、新しい方向性が必要な場合のみtaste。
タスクは何で終わりますか？ UIを出荷 → a11yゲート + web-vitalsリント + verifyスクリーンショットを実行。テーマ/トークンファイルを生成 → tokensエクスポート + ペアのa11y監査。

タスクごとに最大2つのMANUAL.mdファイルを読み込んでください。4つのオリジナルモジュールは1つの外部モジュールとスタックできます（例：rtl-arabic + taste）。

🚫 アンチパターンレジストリ — これらは絶対に出荷しない

マニュアルから収集したモジュール横断禁止事項。出力にこれらが含まれている場合、タスクは完了していません:

ボタンの代わりになる<div onClick>（a11y §3） — キーボード無効、スクリーンリーダー不可視。
グレーオンカラーのテキスト、または4.5:1未満のfg/bgペア（a11y §2、impeccable禁止） — 推測ではなくコントラストスクリプトを実行。
代替フォーカスリングなしのoutline: none（a11y §5）。
prefers-reduced-motionガードなしのアニメーション（a11y §7、transitionsルール） — より厳しいルールが優先。
アラビア語テキストへのletter-spacing（rtl-arabic §3） — 接続スクリプトを壊します。
RTLページでの物理的なleft/right CSSプロパティ（rtl-arabic §1） — 論理プロパティを使用。
トークンファイルが存在する場合のコンポーネント内のハードコードされたhex/px（tokens §7） — 生の値はトークンファイルのみが保持。
1要素のホバーにGSAP（transitionsを使用）またはスクロール振り付けシーンにCSSトランジション（gsapを使用）。
catalog.jsonにないreact-bitsコンポーネント名 — 絶対に発明しない。
カードのネスト、UIのバウンスイージング、その他のimpeccableスロップ — /impeccable auditがキャッチ。
ヒーロー/LCP画像のloading="lazy"（web-vitals §2） — ブラウザはレイアウト後にリクエストを発見。
明示的なwidth/heightなしの<img>または<iframe>（web-vitals §3） — レイアウトシフト保証。
defer/asyncなしの<head>内のクラシックな<script src>、またはdocument.write（web-vitals §7）。
font-displayなしの@font-face、またはfonts.gstatic.comへのpreconnectなしのGoogle-Fontsスタイルシート（web-vitals §6）。

📦 内部構成

design-arsenal/                  ← 1つのスキル、1回インストール
├── SKILL.md                     ← 単一のエントリーポイント（このファイル）
├── index.json                   ← 機械可読モジュールインデックス
├── install.sh                   ← ワンコマンドインストーラー（全プラットフォーム）
├── ATTRIBUTION.md               ← ソースとライセンス
├── README.md                    ← الدليل الكامل بالعربية
├── demo/index.html              ← モーションスタックの動作デモ
├── examples/gsap/               ← GSAPスターター例（react/vue/nuxt/vanilla）
└── skills/                      ← 内部モジュール（リファレンスマニュアルのみ）
    ├── extract-design/          ← designlang: URL → 完全なデザインシステム（17+ファイル）
    ├── taste/                   ← taste-skill v2: 13のアンチスロップルール + ライブラリ + インスペクタ
    ├── impeccable/              ← impeccable: 24コマンド + 60+検出ルール + スクリプト
    ├── gsap/                    ← 8 GSAPモジュール: core/timeline/scrolltrigger/react/plugins/…
    ├── react-bits/              ← 218のアニメーションReactコンポーネント（TS-CSS + TS-Tailwind）+ カタログ
    ├── transitions/             ← transitions.dev: 18のトランジションリファレンス + トークン
    ├── playwright-cli/          ← ブラウザ自動化モジュール + 10のリファレンス
    ├── rtl-arabic/              ← オリジナル: アラビア語/RTLインターフェース（論理プロパティ、タイポグラフィ、10ポイント監査）
    ├── a11y/                    ← オリジナル: WCAG 2.2 AAゲート + ゼロ依存コントラストスクリプト
    ├── design-tokens/           ← オリジナル: DTCGアーキテクチャ + マルチターゲットコンバーター
    └── web-vitals/              ← オリジナル: Core Web Vitalsプレイブック + 静的HTMLリンター

すべてのモジュールディレクトリにはMANUAL.md（以前は独自のSKILL.md）が含まれています。このルートのSKILL.mdのみが存在するため、エージェントは正確に1つのツールを登録してロードします — スキルの乱立、重複トリガー、7つのインストール済みスキルによるコンテキスト肥大化はありません。

🚀 クイックスタート

ゼロからランディングページまで（完全パイプライン）:

（オプションの事前調査）競合URL 1〜2件からextract → トークン + パターン。
taste → ブリーフを読み、方向性（タイプ/パレット/レイアウト系統）を推測し、禁止事項を適用。
構築。transitionsからモーション、react-bitsからすぐ使えるコンポーネント、gsapからシーン作業を取得。
polish → /impeccable polish + 出荷前に/impeccable audit。
verify → デスクトップ + モバイル幅でスクリーンショットを撮り、何も壊れていないことを確認。

ただUIが醜いのを直すだけ？ → polishのみ（開始: /impeccable audit <target>）。 アニメーションだけ？ → マイクロにはtransitions、シーンにはgsap、同じ要素に両方は使用しない。 ページが遅い / バイタルが不合格？ → web-vitals: マークアップをリントし、LCP/CLS/INPプレイブックを適用、その後測定（§8）。

⚙️ 初回のみの環境注意事項

extractには**Node 20+**とPlaywrightが必要です（npx designlang <url>は初回実行時にインストールを処理）。
polishスクリプトはskills/impeccable/scripts/にある自己完結型バイナリです。shがないWindowsではimpeccable.cmdを使用。
tasteスクリプトはゼロ依存Nodeです（node skills/taste/scripts/lint.mjs src/）。
web-vitalsリンターはゼロ依存Node 18+です（node skills/web-vitals/scripts/webvitals.mjs page.html）。
verifyにはnpm install -g @playwright/cli + playwright-cli install-browser chromiumが必要です。
componentsローカルソースはプレーンファイルです — ts-tailwind/（Tailwindプロジェクト）またはts-default/（CSSプロジェクト）からコピーするか、ライブレジストリを使用: {"registries":{"@react-bits":"https://reactbits.dev/r/{name}.json"}}をcomponents.jsonに。
GSAPの例はexamples/gsap/{vanilla,react,vue,nuxt}にあります。

🧠 エージェント向けルール

1つのツール、1つのエントリ。 すべてのリクエストはこのファイルを経由します。タスクがパイプラインに一致する場合、パイプライン順にモジュールごとに作業を進めてください — モジュールを個別のインストール済みスキルとして探さないでください。これらはこの1つのスキル内部のものです。
ディスクから読み込む。 モジュールパスはこのファイルのディレクトリからの相対パスです。アクションを起こす前にモジュールのMANUAL.mdを完全に読んでください。
一致させ、混ぜない。 1つのタスク → 1つのプライマリモジュール。上記のパイプライン順でのみモジュールをスタックしてください。
各モジュールの禁止事項を尊重する。 tasteはテンプレート風の外観を禁止。impeccableはグレーオンカラー、ネストされたカード、バウンスイージングを禁止。transitionsとa11yはprefers-reduced-motionガードを要求。rtl-arabicはアラビア語へのレタースペーシングとRTLページでの物理的なleft/rightを禁止。web-vitalsは遅延ヒーロー、無次元メディア、レンダーブロッキングヘッドスクリプトを禁止。ルールが競合する場合、より厳しいルールが優先されます — そしてa11yの安全性ルールはすべての美的優先順位に優先します。
コンポーネント名を発明しない。 react-bitsについては、skills/react-bits/catalog.jsonに存在する名前のみを使用。それ以外はtasteルールに従ってゼロから構築。
測定し、目視で判断しない。 コントラストの主張はnode skills/a11y/scripts/contrast.mjsから。トークンエクスポートはnode skills/design-tokens/scripts/convert.mjsから。構造的パフォーマンスの主張はnode skills/web-vitals/scripts/webvitals.mjsから。スクリプトがあなたの目と異なる場合、スクリプトが優先されます。
アラビア語コンテンツはrtl-arabicを経由する。 タスクにアラビア語またはRTLコンテンツが含まれる瞬間、CSSを書く前にskills/rtl-arabic/MANUAL.mdを読んでください — 他のモジュールが主導していても。
帰属表示。 7つの外部モジュールは独立したオープンソースプロジェクトからのものです — それらのライセンスをそのまま保持してください（ATTRIBUTION.md参照）。4つのオリジナルモジュール（rtl-arabic、a11y、design-tokens、web-vitals）はこのバンドルの一部です。

Design Arsenal — 統合フロントエンドデザインツール