uxgen

Keterampilan Claude Code untuk desain toko, halaman produk, dan halaman arahan

Agen Anda sudah dapat membangun halaman produk yang indah. Namun, agen tersebut tidak dapat memberi tahu Anda apakah produk ini seharusnya memiliki daftar tingkatan, bundel, penambahan pesanan, atau tidak sama sekali — sehingga agen tersebut membuat stepper dan foto stok, dan halaman tersebut tidak menghasilkan uang.

Keterampilan ini adalah pengambil keputusan. Keterampilan ini membaca produk pedagang dan menyimpulkan mekanisme penjualan mana yang termasuk dalam halaman dan dalam urutan apa, masing-masing dengan alasannya, plus empat komponen referensi dan aturan UE yang mengaturnya.

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

Berfungsi dengan Claude Code, Codex, Cursor, dan agen apa pun yang membaca format Agent Skills. Di Claude Code, Anda juga dapat menginstalnya sebagai plugin:

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

MIT. Tidak ada dependensi selain React untuk komponen. Tidak ada yang menghubungi server.

---

Audit toko sebelum Anda menyentuhnya

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

Tanpa dependensi, hanya membaca, tidak menulis apa pun. Ini menemukan cacat yang keterampilan ini ada untuk mencegah, masing-masing dengan file, baris, dan alasannya:

• stepper kuantitas di mana tingkatan bernama seharusnya berada
• add-on yang dapat dimulai sudah dicentang — dapat dikembalikan berdasarkan hukum UE
• peringkat, jumlah ulasan, "12 orang sedang melihat", atau "hanya 3 tersisa" yang dibuat-buat
• harga yang dicoret yang tidak berasal dari harga satuan
• hitungan mundur yang diisi dari Date.now(), sehingga diatur ulang saat dimuat ulang
• salinan placeholder yang masih ada di sumber
• dan mana dari empat mekanisme yang tidak ada sama sekali di basis kode

--json untuk keluaran mesin, --strict untuk menggagalkan pekerjaan CI.

---

Apa yang sebenarnya dilakukan keterampilan ini

1. Ini memutuskan, bukan menempel

Inti dari keterampilan ini adalah tabel keputusan. Tujuh pertanyaan tentang produk — satu item atau katalog, impulsif atau dipertimbangkan, fisik atau digital, habis pakai atau tahan lama, varian, kedaluwarsa, kisaran harga — dan dari jawabannya, mekanisme mana yang termasuk di sini dan mana yang tidak.

Setiap aturan membawa alasannya, yang membuatnya dapat digunakan pada produk yang belum pernah dilihat tabel:

Jika	Maka	Karena
tahan lama	tidak ada pemecahan kuantitas	tidak ada yang membutuhkan dua lampu; tingkatan terbaca sebagai toko yang tidak memahami produknya sendiri
kedaluwarsa dalam n minggu	batasi tingkatan teratas di dalam n	enam dari sesuatu yang rusak dalam dua menghasilkan pengembalian dana dan ulasan permanen
kisaran harga yang dipertimbangkan	bukti dan jaminan sebelum harga	pertanyaannya adalah haruskah saya sama sekali, bukan berapa banyak — harga lebih dulu membuat harga menjadi seluruh percakapan
digital	tidak pernah ada bilah pengiriman gratis	tidak ada yang dikirim; bilah pengiriman pada unduhan adalah kebohongan dengan animasi kemajuan
varian adalah ukuran tubuh	tidak ada pemecahan kuantitas	satu orang memakai satu ukuran
produk tunggal	gandakan hanya jika menggandakan itu logis, jika tidak, tidak ada apa-apa	toko tanpa pelengkap yang jujur yang menciptakan satu menaruh sesuatu di keranjang yang tidak diinginkan pembeli

Kemudian mengurutkan bagian — dan urutannya berbeda menurut produk. Impulsif menempatkan harga sebelum bukti; dipertimbangkan menempatkan bukti sebelum harga. Komponen yang sama, halaman yang berlawanan, dan alasannya ada di tabel.

2. Ini membawa aturan yang merupakan hukum, bukan selera

• Jangan pernah mencentang add-on terlebih dahulu. Pasal 22 Directive 2011/83/EU mengharuskan persetujuan tegas untuk pembayaran apa pun di luar kewajiban utama dan membuat pembayaran yang disimpulkan dari default yang harus ditolak konsumen dapat dikembalikan. Beberapa widget upsell komersial dikirim dengan centang awal sebagai default pabriknya.
• Jangan pernah membuat harga yang dicoret. Berdasarkan Directive 98/6/EC sebagaimana diubah oleh Directive (EU) 2019/2161, jangkar harus berupa harga yang benar-benar diterapkan: compareAtCents = unitPriceCents × units, dan tidak ada yang lain.
• Jangan pernah membuat bukti. Peringkat, jumlah ulasan, penghitung pengunjung, atau hitungan mundur yang tidak diperoleh siapa pun adalah praktik komersial yang tidak adil berdasarkan Directive 2005/29/EC begitu dikirim. Keterampilan ini membangun slot dan membiarkannya kosong.

3. Ini mengirim empat komponen untuk dibangun

React, tanpa dependensi, MIT. Masing-masing membawa aturannya sebagai kode, dengan pagar pengaman yang melempar di pengembangan daripada mengirim cacat secara diam-diam.

Komponen	Apa yang ditanyakan kepada pembeli	Di mana ia berada
Pemecahan kuantitas	paket mana, bukan berapa banyak	halaman produk
Bilah pengiriman gratis	seberapa jauh dari ambang batas, dalam uang	keranjang
Penambahan pesanan	satu pelengkap, ya atau tidak, tidak dicentang	keranjang, di atas total
Tambahkan ke keranjang lengket	tidak ada — ia hanya tetap dapat dijangkau	halaman produk seluler

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}
/>

---

Satu aturan, jika Anda tidak membaca yang lain

Pemecahan kuantitas adalah grup radio dari tingkatan bernama. Jangan pernah input angka.

Stepper menanyakan berapa banyak — aritmatika yang dilakukan pembeli, tanpa ada yang menyarankan bahwa dua adalah ide yang lebih baik daripada satu. Grup radio dari paket bernama menanyakan yang mana, dan salah satunya terlihat sebagai pilihan yang masuk akal.

Kesalahan tunggal itu adalah yang paling umum di toko yang dihasilkan.

---

Mengapa repositori ini ada

Pada 25 Agustus 2026 kami bertanya kepada ChatGPT dan Perplexity, keduanya dengan pencarian web diaktifkan, untuk komponen React untuk buy 2, save 15%.

ChatGPT mengembalikan stepper kuantitas dan tidak mengutip sumber sama sekali. Perplexity juga mengembalikan stepper, dengan min, max, step dan prop bundleSize, mengutip pola pemilih kuantitas generik.

Keduanya salah dengan cara yang sama, dan alasannya adalah bagian yang berguna: tidak ada sumber kanonik untuk mereka konsultasikan. Cari tiered pricing component dan hasilnya tentang tabel harga. Cari order bump component dan hasilnya tentang plugin toko. Cari bundle quantity selector component react dan hasilnya tentang ukuran bundel JavaScript.

Mekanisme perdagangan tidak memiliki spesifikasi di web terbuka, sehingga model kembali ke hal terdekat yang telah dibacanya seribu kali.

Repositori ini adalah spesifikasi itu.

---

Apa yang ada di dalam kotak

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

---

Apa ini bukan

Ini bukan pustaka komponen, dan menginstalnya tidak akan mengisi halaman Anda dengan blok. Ini mengajarkan keputusan dan aturan serta memberikan empat implementasi untuk dibangun, karena penilaian adalah bagian yang dapat ditransfer dan komponen yang ditempel adalah bagian yang tidak.

Ini bukan kerangka pengujian A/B dan tidak menjanjikan peningkatan. Di bawah sekitar empat puluh ribu sesi per varian, uji terpisah tidak dapat memisahkan efek nyata dari kebisingan, yang merupakan sebagian besar toko. Apa yang mekanisme ini berikan adalah penghapusan kelalaian yang diketahui, yang tidak perlu diuji untuk layak dilakukan.

Itu tidak akan, dengan sendirinya, membuat halaman menjadi indah. references/design-laws.md membawa aturan komposisi yang kami kerjakan, tetapi kesenjangan antara halaman yang benar dan yang mencolok sebagian besar adalah fotografi, dan tidak ada keterampilan yang mengirim itu.

---

Bacaan terkait

• Pemecahan kuantitas yang meningkatkan nilai pesanan rata-rata
• Di mana menempatkan upsell di halaman produk
• Blok ecommerce shadcn: apa yang ada dan apa yang hilang
• Aplikasi Upsell untuk Shopify, atau buat sendiri

Saudara kandung

Keterampilan ini mencakup halaman produk. Dua lainnya mencakup sisa kunjungan:

• claude-code-checkout-upsell — upsell mana yang masuk ke keranjang, checkout, dan setelah pembayaran: penambahan pesanan, pembelian pasca-pembelian satu klik, satu cross-sell, bilah pengiriman gratis.
• claude-code-ecommerce-dark-patterns — mengaudit hasil untuk pola yang ilegal di UE, Inggris, dan AS, dengan hukum, file dan baris, dan pengganti yang jujur.

Dibuat oleh uxgen — server MCP yang memberikan agen pengkodean seluruh perdagangan penjualan: urutan bagian, fotografi, tata bahasa yang terkunci, dan audit yang menolak halaman yang tidak dapat menghasilkan uang. Keterampilan ini adalah bagian yang gratis.

MIT © 2026 uxgen