このプロジェクトについて

ui-clone-skillsは、Claude CodeおよびCodexと互換性のあるコーディングエージェント用プラグインで、ライブウェブサイトをReactおよびTailwind CSSコードに逆エンジニアリングするように設計されています。標準的なスクリーンショットからコードを推測するツールとは異なり、このツールは「モーションフォレンジック」を行い、ライブDOMを検査し、実際のCSSやアセットをダウンロードし、JavaScriptバンドル（GSAP、Framer Motion、Webflow IX2を含む）からアニメーションパラメータを抽出します。 パイプラインは4つの主要なステージで構成されています： 1. キャプチャ：複数のビューポートとインタラクション状態にわたって参照フレーム、動画、DOMマップを記録します。 2. デコード：スタイルシート、計算値を抽出し、モーションパラメータ用の`transition-spec.json`を作成します。 3. 再作成：観測されたデータに基づいてReact/TSXおよびTailwindコードを生成します。 4. 検証：絶対誤差（AE）や構造的類似性（SSIM）などの決定論的指標を使用して、実装と参照との比較を行います。 主な機能として、フルパイプライン用の`ui-reverse-engineering`、参照証拠収集用の`ui-capture`、クローンと元サイト間の不一致診断用の`visual-debug`が提供されます。