🛠️ 開発・MCP コミュニティ

snipcart

Snipcartは、静的なウェブサイトやJAMstackサイトに簡単にショッピングカート機能を追加したり、バックエンドなしでECサイトを構築したりするなど、あらゆるHTMLページにEC機能を手軽に組み込むことを可能にするSkill。

📜 元の英語説明(参考)

Add e-commerce to any website with Snipcart. Use when a user asks to add a shopping cart to a static site, sell products from a JAMstack site, add buy buttons to any HTML page, or integrate e-commerce without a backend.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o snipcart.zip https://jpskill.com/download/15389.zip && unzip -o snipcart.zip && rm snipcart.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15389.zip -OutFile "$d\snipcart.zip"; Expand-Archive "$d\snipcart.zip" -DestinationPath $d -Force; ri "$d\snipcart.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して snipcart.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → snipcart フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Snipcart

概要

Snipcart は、HTML 属性だけで、あらゆるウェブサイトに完全なショッピングカートを追加します。バックエンドは不要で、静的サイト、JAMstack、およびあらゆる HTML ページで動作します。チェックアウト、支払い、配送、税金、在庫を処理します。

手順

ステップ 1: あらゆるページに追加

<!-- Snipcart スクリプトをページに追加 -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.css" />
<script async src="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

<!-- 商品購入ボタン — HTML 属性のみ -->
<button class="snipcart-add-item"
  data-item-id="tshirt-001"
  data-item-name="Premium T-Shirt"
  data-item-price="29.99"
  data-item-url="/products/tshirt"
  data-item-image="/images/tshirt.jpg"
  data-item-description="100% organic cotton"
  data-item-custom1-name="Size"
  data-item-custom1-options="S|M|L|XL">
  Add to Cart — $29.99
</button>

<!-- カートの概要ボタン -->
<button class="snipcart-checkout">
  Cart (<span class="snipcart-items-count">0</span>)
</button>

ステップ 2: Astro/Next.js 統合

---
// components/ProductCard.astro — 静的サイト向けの商品カード
const { product } = Astro.props
---
<div class="product-card">
  <img src={product.image} alt={product.name} />
  <h3>{product.name}</h3>
  <p class="price">${product.price}</p>
  <button class="snipcart-add-item"
    data-item-id={product.id}
    data-item-name={product.name}
    data-item-price={product.price}
    data-item-url={`/products/${product.slug}`}
    data-item-image={product.image}>
    Add to Cart
  </button>
</div>

ステップ 3: JavaScript API

// Snipcart JS API でカートの動作をカスタマイズ
document.addEventListener('snipcart.ready', () => {
  Snipcart.api.cart.items.added((item) => {
    console.log('Item added:', item.name)
    // アナリティクスで追跡
  })

  Snipcart.api.cart.confirmed((order) => {
    console.log('Order confirmed:', order.token)
    // CRM に送信、メールをトリガーなど
  })
})

ガイドライン

Snipcart は 2% のトランザクション手数料 + 決済処理業者の手数料がかかります。月額料金はかかりません。
商品は HTML に対して検証されます — Snipcart は商品 URL をクロールして価格を確認します。
あらゆる SSG (Astro, Hugo, 11ty, Gatsby) で動作します — JAMstack e コマースに最適です。
サブスクリプション、デジタル商品、および多通貨をサポートします。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Snipcart

Overview

Snipcart adds a full shopping cart to any website with just HTML attributes. No backend needed — it works with static sites, JAMstack, and any HTML page. Handles checkout, payments, shipping, taxes, and inventory.

Instructions

Step 1: Add to Any Page

<!-- Add Snipcart scripts to your page -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.css" />
<script async src="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

<!-- Product buy button — just HTML attributes -->
<button class="snipcart-add-item"
  data-item-id="tshirt-001"
  data-item-name="Premium T-Shirt"
  data-item-price="29.99"
  data-item-url="/products/tshirt"
  data-item-image="/images/tshirt.jpg"
  data-item-description="100% organic cotton"
  data-item-custom1-name="Size"
  data-item-custom1-options="S|M|L|XL">
  Add to Cart — $29.99
</button>

<!-- Cart summary button -->
<button class="snipcart-checkout">
  Cart (<span class="snipcart-items-count">0</span>)
</button>

Step 2: Astro/Next.js Integration

---
// components/ProductCard.astro — Product card for static site
const { product } = Astro.props
---
<div class="product-card">
  <img src={product.image} alt={product.name} />
  <h3>{product.name}</h3>
  <p class="price">${product.price}</p>
  <button class="snipcart-add-item"
    data-item-id={product.id}
    data-item-name={product.name}
    data-item-price={product.price}
    data-item-url={`/products/${product.slug}`}
    data-item-image={product.image}>
    Add to Cart
  </button>
</div>

Step 3: JavaScript API

// Customize cart behavior with Snipcart JS API
document.addEventListener('snipcart.ready', () => {
  Snipcart.api.cart.items.added((item) => {
    console.log('Item added:', item.name)
    // Track in analytics
  })

  Snipcart.api.cart.confirmed((order) => {
    console.log('Order confirmed:', order.token)
    // Send to CRM, trigger email, etc.
  })
})

Guidelines

Snipcart takes 2% transaction fee + payment processor fees. No monthly fee.
Products are validated against your HTML — Snipcart crawls the product URL to verify prices.
Works with any SSG (Astro, Hugo, 11ty, Gatsby) — perfect for JAMstack e-commerce.
Supports subscriptions, digital products, and multi-currency.