uxgen

公式

ホスト型MCPで、コーディングエージェントにECコンバージョンの仕組み（数量割引、送料無料のしきい値、注文バンプ、スティッキーなカート追加）を提供し、EUルールも付属しています。

GitHub

Uxgen MCPで何ができますか？

既存のストアフロントを監査する — コードベースに対してaudit-commerce.mjsを実行し、事前チェック済みのアドオン、捏造された証明、数量割引の欠落などの欠陥を、ファイルと行番号を添えて指摘します。
製品ごとの販売メカニクスを決定する — 製品の属性と判定テーブルに基づいて、4つのコンポーネント（数量割引、注文バンプ、送料無料バー、スティッキーなカート追加ボタン）のうちどれをページに配置するかを尋ねます。
注文ページのセクションを正しく並べる — 製品の価格、証明、保証の正しい順序を取得します。これは、衝動買いか熟慮型の購入かによって変わります。
コンプライアンス準拠の数量割引を生成する — EU価格表示指令に従い、単価から導出した正しいcompareAtCentsを使用して、名前付きティアのラジオグループ（ステッパーは不可）を構築します。
違法なダークパターンをチェックする — ページが事前チェック済みのアドオン、捏造された基準価格、偽の社会的証明を回避していることを確認し、それぞれが違反する特定のEU指令を引用します。

ドキュメント

ストア、商品ページ、ランディングページデザインのためのClaude Codeスキル

あなたのエージェントはすでに美しい商品ページを構築できます。しかし、この商品にティアリスト、バンドル、オーダーバンプのどれが適切かを判断することはできません。そのため、ステッパーとストックフォトを生成し、ページは収益を生みません。

このスキルがその判断を行います。マーチャントの商品を読み取り、どの販売メカニクスをページに配置すべきか、どの順序で配置すべきかを、それぞれの理由とともに導き出します。さらに、4つのリファレンスコンポーネントと、それらを規制するEU規則も提供します。

npx skills add kinerette/claude-code-store-design

Claude Code、Codex、Cursor、およびAgent Skills形式を読み取る任意のエージェントで動作します。Claude Codeではプラグインとしてインストールすることもできます:

/plugin marketplace add kinerette/claude-code-store-design
/plugin install store-design@uxgen

MITライセンス。コンポーネントにはReact以外の依存関係はありません。外部への通信は一切行いません。

手を加える前にストアを監査する

node skills/store-design/scripts/audit-commerce.mjs ./src

依存関係ゼロ、読み取り専用、書き込みなし。このスキルが防ぐために存在する欠陥を、ファイル、行、理由とともに検出します:

名前付きティアが適切な場所にあるステッパー
事前チェック済みで開始できるアドオン — EU法では返金対象
捏造された評価、レビュー数、「12人が閲覧中」、「残り3点」
単価から導出されていない打ち消し線付き価格
Date.now()からシードされたカウントダウン — リフレッシュでリセットされる
ソースに残っているプレースホルダーコピー
4つのメカニクスのうちコードベースに完全に存在しないもの

--jsonはマシン出力用、--strictはCIジョブを失敗させるためのものです。

このスキルが実際に行うこと

1. 貼り付けるのではなく、判断する

このスキルの中心は判断テーブルです。商品に関する7つの質問 — 単一商品かカタログか、衝動買いか熟慮か、物理かデジタルか、消耗品か耐久品か、バリエーション、賞味期限、価格帯 — と、その回答から、どのメカニクスがここに属し、どれが属さないかを判断します。

各ルールには理由が含まれており、テーブルが一度も見たことのない商品でも使用可能にしています:

条件	結果	理由
耐久品	数量ブレークなし	ランプを2つ必要とする人はいない。ティアは自社商品を理解していないショップとして読まれる
n週間で期限切れ	最上位ティアをn以内に制限	2週間で傷むものを6個購入すると、返金と永続的なレビューが発生する
熟慮型の価格帯	価格の前に証明と保証	質問はそもそも買うべきかであり、何個かではない — 価格を先に出すと価格が会話のすべてになる
デジタル	送料無料バーを絶対に表示しない	発送はない。ダウンロードに送料バーを表示するのは、進捗アニメーション付きの嘘である
バリエーションが体型サイズ	数量ブレークなし	1人が着るサイズは1つだけ
単一商品	倍増が論理的な場合のみ倍増、それ以外は何もしない	正直な補完商品がないショップが補完商品をでっち上げると、買い手が望んでいないものをカートに入れる

次にセクションを並べます — その順序は商品によって異なります。衝動買いは価格を証明の前に置き、熟慮は証明を価格の前に置きます。同じコンポーネントでも、ページは正反対になり、その理由はテーブルにあります。

2. 好みではなく法律であるルールを保持する

アドオンを事前チェックしない。 指令2011/83/EU第22条は、主たる義務を超える支払いには明示的な同意を要求し、消費者が拒否しなければならなかったデフォルトから推測された支払いを返金対象としています。いくつかの商用アップセルウィジェットは、工場出荷時のデフォルトとして事前チェック済みで出荷されます。
打ち消し線付き価格を捏造しない。 指令(EU)2019/2161によって改正された指令98/6/ECに基づき、アンカー価格は実際に適用された価格でなければなりません: compareAtCents = unitPriceCents × units、それ以外は認められません。
証明を生成しない。 誰も獲得していない評価、レビュー数、閲覧者カウンター、カウントダウンは、出荷された瞬間に指令2005/29/ECに基づく不公正な商業慣行となります。このスキルはスロットを構築し、空のままにします。

3. 構築のための4つのコンポーネントを提供する

React、依存関係なし、MITライセンス。各コンポーネントはルールをコードとして保持し、欠陥を静かに出荷するのではなく開発中にスローするガードレールを備えています。

コンポーネント	購入者に尋ねること	配置場所
数量ブレーク	何個ではなく、どのパッケージか	商品ページ
送料無料バー	しきい値まであとどれだけか、金額で	カート
オーダーバンプ	1つの補完商品、はい/いいえ、チェックなし	カート、合計の上
スティッキーなカートに追加	何も尋ねない — ただ到達可能であり続ける	モバイル商品ページ

import { QuantityBreaks } from "./src/quantity-breaks"

<QuantityBreaks
  tiers={[
    { units: 1, name: "One tin",   totalCents: 1900, compareAtCents: 1900 },
    { units: 3, name: "Three tins — the usual reorder",
      totalCents: 4800, compareAtCents: 5700, badge: "Best value", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={setSelected}
/>

他に何も読まない場合の唯一のルール

数量ブレークは名前付きティアのラジオグループです。数値入力ではありません。

ステッパーは何個と尋ねます — 購入者が行う算術であり、2が1より良いアイデアであることを示唆するものは何もありません。名前付きパッケージのラジオグループはどれかを尋ね、そのうちの1つが明らかに賢明な選択として見えます。

この単一の間違いは、生成されたストアフロントで最も一般的なものです。

このリポジトリが存在する理由

2026年8月25日、私たちはChatGPTとPerplexity（両方ともウェブ検索を有効化）に、buy 2, save 15%用のReactコンポーネントを依頼しました。

ChatGPTは数量ステッパーを返し、ソースを一切引用しませんでした。 Perplexityもステッパーを返しました、min、max、step、bundleSizeプロップ付きで、一般的な数量セレクターパターンを引用していました。

両方とも同じ方法で間違っており、その理由が有用な部分です: 彼らが参照できる正規のソースが存在しないのです。tiered pricing componentを検索すると、結果は価格テーブルに関するものです。order bump componentを検索すると、ストアプラグインに関するものです。bundle quantity selector component reactを検索すると、JavaScriptバンドルサイズに関するものです。

コマースメカニクスにはオープンウェブ上に仕様が存在しないため、モデルは何千回も読んだ最も近いものにフォールバックします。

このリポジトリがその仕様です。

パッケージの内容

skills/store-design/
├── SKILL.md                        the trade, condensed
├── references/
│   ├── decision-table.md           ← the centre: which mechanics, which order, why
│   ├── design-laws.md              composition, colour, and the tells of a generated page
│   ├── quantity-breaks.md          tier maths, naming grammar, anti-patterns
│   ├── buy-box.md                  the order of the block that holds the decision
│   ├── proof.md                    reviews and credentials, and what to do with none
│   ├── email-capture.md            the address, without a modal at second zero
│   └── eu-rules.md                 the four constraints that are law
└── scripts/
    └── audit-commerce.mjs          find the defects in an existing store

src/                                four React reference implementations

これが何でないか

これはコンポーネントライブラリではなく、インストールしてもページにブロックが埋め込まれることはありません。判断とルールを教え、構築のための4つの実装を提供します。判断は移転可能な部分であり、貼り付けられたコンポーネントは移転できない部分だからです。

これはA/Bテストフレームワークではなく、リフトを約束するものでもありません。バリアントあたり約4万セッション未満では、分割テストは実際の効果をノイズから分離できません。これはほとんどのストアに当てはまります。これらのメカニクスが提供するのは、既知の欠落の除去であり、テストを必要とせずに行う価値があります。

それ自体では、ページを美しくすることはありません。references/design-laws.mdには私たちが取り組む構成ルールが含まれていますが、正しいページと印象的なページの間のギャップは主に写真であり、どのスキルもそれを提供できません。