skills.rest
doable-me
doable-meOFFICIAL
Explore all skills by this author →
GitHub

ecommerce-website

Generates conversion-focused ecommerce storefronts with PLP, PDP, cart, and checkout following WCAG 2.2 and Core Web Vitals rules.

39|14|Updated Mar 14, 2026
Search Tags:#wcag#conversion optimization#stripe#core web vitals#checkout#ecommerce#storefront
One-click install
npx skills add https://github.com/doable-me/Doable --skill ecommerce-website-doable-me
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ecommerce-website
Source: https://github.com/doable-me/Doable/tree/main/services/api/src/ai/skills/_system/ecommerce-website
Command: npx skills add https://github.com/doable-me/Doable --skill ecommerce-website-doable-me

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building an online store involves dozens of interlocking decisions across UX, performance, accessibility, payments, and SEO, and missing any of them costs conversions or creates compliance risk. This Skill encodes those decisions as concrete rules so the AI produces a complete, coherent ecommerce website instead of a generic template. ## Core Features & Use Cases - Full Store Architecture: Covers homepage, PLP, PDP, cart, checkout, account, and policy pages with per-page layout and content rules. - Conversion and Trust Rules: Enforces CTA hierarchy, guest checkout, trust signal placement, review authenticity, and friction reduction patterns. - Performance and Accessibility Guardrails: Applies Core Web Vitals targets (LCP, INP, CLS), WCAG 2.2 AA criteria, semantic HTML, and design system tokens. - PCI-Safe Payments and SEO: Mandates hosted payment fields (Stripe, Razorpay, PayPal), security headers, Schema.org Product structured data, and Merchant Center data matching. - Use Case: Ask for a storefront for a handmade footwear brand and receive a complete implementation plan or code with a design system, accessible product cards, a PCI-compliant checkout flow, and structured data markup. ## Quick Start Build an ecommerce website for a premium leather goods brand with a product listing page, product detail pages, cart drawer, and Stripe checkout.

Frequently Asked Questions about ecommerce-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an ecommerce website with cart and checkout?▼

Define your brand, catalog size, and functional requirements first, then generate the store page by page: homepage, PLP, PDP, cart, and checkout. The Skill enforces guest checkout, a single primary CTA, and hosted payment fields so the flow stays conversion-safe and PCI-compliant.

What tech stack should I use for an online store?▼

Next.js suits SEO-critical large catalogs, Astro fits content-heavy stores, and plain HTML/CSS works for small catalogs or prototypes. For backends, Shopify or WooCommerce launch fastest, while Medusa.js or Saleor give headless control.

How do I make ecommerce checkout PCI compliant?▼

Use hosted fields or an iFrame from a gateway like Stripe Elements or Razorpay Checkout so card data never touches your server, keeping you under SAQ A scope. Never build custom card inputs, store only gateway tokens, and enforce HTTPS with a strict Content Security Policy.

Does the Skill support accessibility requirements like WCAG 2.2?▼

Yes, it targets WCAG 2.2 AA with rules for 4.5:1 text contrast, keyboard navigation with focus trapping, 24x24 pixel minimum target sizes, labeled form inputs, and descriptive alt text on product images. Semantic HTML patterns for product cards, filters, and ratings are included.

How do I add Product structured data for Google Shopping?▼

Embed Schema.org Product JSON-LD on each PDP with name, images, SKU, brand, offers, price, availability, and aggregateRating. The price, title, and availability must exactly match your Merchant Center feed to avoid disapproval.

What are the limitations of this ecommerce Skill?▼

It produces frontend implementations, design systems, and architecture guidance rather than a deployed store with live inventory or payment accounts. You still need to provision a commerce backend, configure the payment gateway, and supply real product data and imagery.

Related Skills

Explore More Software Engineering Skills→
statesetstateset

commerce-products

List, create, update, and activate products with SKU and price validation.

Official
Intermediate
commercenginecommercengine

ce-cart-checkout

Automates Commerce Engine cart, checkout and payment flows for e-commerce storefronts.

Official
Advanced
travisjneumantravisjneuman
88

seo-analytics-auditor

Audit website SEO, verify analytics implementations, and check Core Web Vitals.

Community
Intermediate
weihung0831weihung0831

ck:shopify

Initialize Shopify apps, generate extensions, and manage theme workflows via Shopify CLI.

Community
Intermediate