Communitygithub.com

cristianoliveira/pxp

参照スクリーンショットとpxp CLIの画像比較を活用して、UIコンポーネントを実装または改良します。「このPNGからコンポーネントを構築」「このコンポーネントを一致させる」「このUIをピクセルパーフェクトにする」といったリクエストに使用します。コード変更なしでのスクリーンショット比較も、明示的にリクエストされた場合にサポートします。視覚的な参照なしでUIを実装するためのものではありません。

pxp とは?

このスキルは、pxp CLIを使用して参照スクリーンショットと実際のUIコンポーネントを画像比較し、ピクセル単位での一致を実現するためのものです。開発者がアプリケーションコードの変更を伴う「このPNGからコンポーネントを構築して」「このコンポーネントを参照と一致させて」「このUIをピクセルパーフェクトにして」といったリクエストに対応します。主にClaude CodeなどのAIエージェントでの使用を想定しており、画像比較フィードバックを基にコード修正を提案します。一方で、コード変更を伴わないスクリーンショット比較も、ユーザーが明示的に要求した場合にサポートします。このスキルは、視覚的な参照なしでUIを実装する用途には適していません。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

pxp は何をしますか?

参照スクリーンショットとpxp CLIの画像比較を活用して、UIコンポーネントを実装または改良します。「このPNGからコンポーネントを構築」「このコンポーネントを一致させる」「このUIをピクセルパーフェクトにする」といったリクエストに使用します(アプリケーションコードの変更が想定される場合)。コード変更なしでのスクリーンショット比較も、明示的にリクエストされた場合にサポートします。視覚的な参照なしでUIを実装するためのものではありません。

関連スキル