
e-commerce
E-commerce platforms, payment processing, and shopping cart patterns
- Installs
- 376
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/miles990/claude-software-skills --skill e-commerce- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads e-commerce automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
E-Commerce Development
Overview
Building e-commerce applications with shopping carts, payment processing, inventory management, and order fulfillment.
Shopping Cart
Cart State Management
interface CartItem {
productId: string;
variantId?: string;
quantity: number;
price: number;
name: string;
image: string;
}
interface Cart {
id: string;
items: CartItem[];
subtotal: number;
tax: number;
shipping: number;
total: number;
discountCode?: string;
discountAmount: number;
}
// Zustand cart store
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
interface CartStore {
cart: Cart;
addItem: (item: Omit<CartItem, 'quantity'>, quantity?: number) => void;
updateQuantity: (productId: string, quantity: number) => void;
removeItem: (productId: string) => void;
clearCart: () => void;
applyDiscount: (code: string) => Promise<void>;
}
const useCartStore = create<CartStore>()(
persist(
(set, get) => ({
cart: createEmptyCart(),
addItem: (item, quantity = 1) => {
set((state) => {
const existingIndex = state.cart.items.findIndex(
(i) => i.productId === item.productId && i.variantId === item.variantId
);
const newItems = [...state.cart.items];
if (existingIndex >= 0) {
newItems[existingIndex].quantity += quantity;
} else {
newItems.push({ ...item, quantity });
}
return { cart: recalculateCart({ ...state.cart, items: newItems }) };
});
},
updateQuantity: (productId, quantity) => {
set((state) => {
if (quantity <= 0) {
return {
cart: recalculateCart({
...state.cart,
items: state.cart.items.filter((i) => i.productId !== productId),
}),
};
}
const newItems = state.cart.items.map((item) =>
item.productId === productId ? { ...item, quantity } : item
);
return { cart: recalculateCart({ ...state.cart, items: newItems }) };
});
},
removeItem: (productId) => {
set((state) => ({
cart: recalculateCart({
...state.cart,
items: state.cart.items.filter((i) => i.productId !== productId),
}),
}));
},
clearCart: () => set({ cart: createEmptyCart() }),
applyDiscount: async (code) => {
const discount = await validateDiscountCode(code);
set((state) => ({
cart: recalculateCart({
...state.cart,
discountCode: code,
discountAmount: discount.amount,
}),
}));
},
}),
{ name: 'cart-storage' }
)
);
function recalculateCart(cart: Cart): Cart {
const subtotal = cart.items.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
const tax = subtotal * 0.1; // 10% tax
const shipping = subtotal > 100 ? 0 : 9.99;
const total = subtotal + tax + shipping - cart.discountAmount;
return { ...cart, subtotal, tax, shipping, total };
}
Payment Processing
Stripe Integration
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2023-10-16',
});
// Create checkout session
async function createCheckoutSession(cart: Cart, customerId?: string) {
const session = await stripe.checkout.sessions.create({
mode: 'payment',
customer: customerId,
line_items: cart.items.map((item) => ({
price_data: {
currency: 'usd',
product_data: {
name: item.name,
images: [item.image],
},
unit_amount: Math.round(item.price * 100),
},
quantity: item.quantity,
})),
discounts: cart.discountCode
? [{ coupon: cart.discountCode }]
: undefined,
shipping_address_collection: {
allowed_countries: ['US', 'CA', 'GB'],
},
success_url: `${process.env.APP_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${process.env.APP_URL}/cart`,
metadata: {
cartId: cart.id,
},
});
return session;
}
// Create payment intent (for custom checkout)
async function createPaymentIntent(amount: number, customerId?: string) {
const paymentIntent = await stripe.paymentIntents.create({
amount: Math.round(amount * 100),
currency: 'usd',
customer: customerId,
automatic_payment_methods: { enabled: true },
});
return {
clientSecret: paymentIntent.client_secret,
paymentIntentId: paymentIntent.id,
};
}
// Webhook handler
async function handleStripeWebhook(body: string, signature: string) {
const event = stripe.webhooks.constructEvent(
body,
signature,
process.env.STRIPE_WEBHOOK_SECRET!
);
switch (event.type) {
case 'checkout.session.completed': {
const session = event.data.object as Stripe.Checkout.Session;
await fulfillOrder(session);
break;
}
case 'payment_intent.succeeded': {
const paymentIntent = event.data.object as Stripe.PaymentIntent;
await handlePaymentSuccess(paymentIntent);
break;
}
case 'payment_intent.payment_failed': {
const paymentIntent = event.data.object as Stripe.PaymentIntent;
await handlePaymentFailure(paymentIntent);
break;
}
}
}
React Stripe Elements
import { loadStripe } from '@stripe/stripe-js';
import {
Elements,
PaymentElement,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);
function CheckoutForm({ clientSecret }: { clientSecret: string }) {
const stripe = useStripe();
const elements = useElements();
const [error, setError] = useState<string | null>(null);
const [processing, setProcessing] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!stripe || !elements) return;
setProcessing(true);
setError(null);
const { error: submitError } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${window.location.origin}/checkout/success`,
},
});
if (submitError) {
setError(submitError.message || 'Payment failed');
setProcessing(false);
}
};
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
{error && <div className="error">{error}</div>}
<button type="submit" disabled={!stripe || processing}>
{processing ? 'Processing...' : 'Pay Now'}
</button>
</form>
);
}
function CheckoutPage() {
const [clientSecret, setClientSecret] = useState('');
useEffect(() => {
fetch('/api/create-payment-intent', {
method: 'POST',
body: JSON.stringify({ amount: cart.total }),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);
if (!clientSecret) return <Loading />;
return (
<Elements
stripe={stripePromise}
options={{ clientSecret, appearance: { theme: 'stripe' } }}
>
<CheckoutForm clientSecret={clientSecret} />
</Elements>
);
}
Inventory Management
interface Product {
id: string;
name: string;
sku: string;
price: number;
inventory: number;
lowStockThreshold: number;
variants: ProductVariant[];
}
interface ProductVariant {
id: string;
name: string;
sku: string;
price: number;
inventory: number;
attributes: Record<string, string>;
}
// Inventory operations with optimistic locking
async function reserveInventory(items: CartItem[]): Promise<boolean> {
return prisma.$transaction(async (tx) => {
for (const item of items) {
const product = await tx.product.findUnique({
where: { id: item.productId },
select: { inventory: true, version: true },
});
if (!product || product.inventory < item.quantity) {
throw new Error(`Insufficient inventory for ${item.name}`);
}
// Optimistic locking with version check
const updated = await tx.product.updateMany({
where: {
id: item.productId,
version: product.version,
inventory: { gte: item.quantity },
},
data: {
inventory: { decrement: item.quantity },
version: { increment: 1 },
},
});
if (updated.count === 0) {
throw new Error(`Concurrent modification for ${item.name}`);
}
}
return true;
});
}
// Release inventory (on order cancellation)
async function releaseInventory(orderId: string) {
const order = await prisma.order.findUnique({
where: { id: orderId },
include: { items: true },
});
await prisma.$transaction(
order.items.map((item) =>
prisma.product.update({
where: { id: item.productId },
data: { inventory: { increment: item.quantity } },
})
)
);
}
// Low stock alerts
async function checkLowStock() {
const lowStockProducts = await prisma.product.findMany({
where: {
inventory: { lte: prisma.product.fields.lowStockThreshold },
},
});
for (const product of lowStockProducts) {
await sendLowStockAlert(product);
}
}
Order Management
enum OrderStatus {
PENDING = 'pending',
PAID = 'paid',
PROCESSING = 'processing',
SHIPPED = 'shipped',
DELIVERED = 'delivered',
CANCELLED = 'cancelled',
REFUNDED = 'refunded',
}
interface Order {
id: string;
userId: string;
status: OrderStatus;
items: OrderItem[];
subtotal: number;
tax: number;
shipping: number;
total: number;
shippingAddress: Address;
billingAddress: Address;
paymentIntentId: string;
trackingNumber?: string;
createdAt: Date;
updatedAt: Date;
}
// Create order from checkout session
async function fulfillOrder(session: Stripe.Checkout.Session) {
const order = await prisma.order.create({
data: {
userId: session.client_reference_id!,
status: OrderStatus.PAID,
paymentIntentId: session.payment_intent as string,
subtotal: session.amount_subtotal! / 100,
total: session.amount_total! / 100,
shippingAddress: JSON.parse(session.metadata!.shippingAddress),
items: {
create: JSON.parse(session.metadata!.items),
},
},
});
// Reserve inventory
await reserveInventory(order.items);
// Send confirmation email
await sendOrderConfirmation(order);
// Notify fulfillment system
await notifyFulfillment(order);
return order;
}
// Order status updates
async function updateOrderStatus(orderId: string, status: OrderStatus) {
const order = await prisma.order.update({
where: { id: orderId },
data: { status },
});
// Send notification
await sendOrderStatusUpdate(order);
return order;
}
Product Catalog
// Product search with filters
async function searchProducts(params: {
query?: string;
category?: string;
minPrice?: number;
maxPrice?: number;
sortBy?: 'price' | 'name' | 'createdAt';
sortOrder?: 'asc' | 'desc';
page?: number;
limit?: number;
}) {
const {
query,
category,
minPrice,
maxPrice,
sortBy = 'createdAt',
sortOrder = 'desc',
page = 1,
limit = 20,
} = params;
const where: Prisma.ProductWhereInput = {
status: 'active',
...(query && {
OR: [
{ name: { contains: query, mode: 'insensitive' } },
{ description: { contains: query, mode: 'insensitive' } },
],
}),
...(category && { categoryId: category }),
...(minPrice && { price: { gte: minPrice } }),
...(maxPrice && { price: { lte: maxPrice } }),
};
const [products, total] = await Promise.all([
prisma.product.findMany({
where,
orderBy: { [sortBy]: sortOrder },
skip: (page - 1) * limit,
take: limit,
include: {
category: true,
images: true,
variants: true,
},
}),
prisma.product.count({ where }),
]);
return {
products,
pagination: {
page,
limit,
total,
totalPages: Math.ceil(total / limit),
},
};
}
Related Skills
- [[payment-processing]] - Payment systems
- [[backend]] - API development
- [[database]] - Data modeling
FAQ
What does the e-commerce skill do?
E-commerce platforms, payment processing, and shopping cart patterns
How do I install e-commerce?
Run npx skills add https://github.com/miles990/claude-software-skills --skill e-commerce in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/e-commerce/ (personal) or .claude/skills/e-commerce/ (project).
Which AI agents can use e-commerce?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is e-commerce safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains e-commerce?
It is published by miles990 in miles990/claude-software-skills. It has 376 recorded installs.
More from miles990/claude-software-skills
code-quality
miles990/claude-software-skills
Clean code principles, SOLID, and code review practices
devops-cicd
miles990/claude-software-skills
CI/CD pipelines, infrastructure as code, and deployment strategies
game-development
miles990/claude-software-skills
Game development patterns, architectures, and best practices
project-management
miles990/claude-software-skills
Open the skill to read its SKILL.md instructions.
saas-platforms
miles990/claude-software-skills
Open the skill to read its SKILL.md instructions.
architecture-patterns
miles990/claude-software-skills
Software architecture patterns and best practices
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.