Live example and code — Commerce and checkout (Bootstrap v5.3)

Use this skill when asked to implement, migrate, debug or review the corresponding real interface feature. You MUST implement actual code in the user's repository; do not merely paste advice. Do not request MCP.

Task and plan

Goal: Live example and code. Context: Commerce and checkout. Acceptance: Code is selectable and mobile-scrollable. Product emphasis: Keep product context, price, shipping and primary actions accessible; no hidden costs.

1. Inspect lockfile and existing design system. Verify that the correct framework and version is installed.
2. Read ../../frameworks/patterns/bs/code-preview/commerce.md from this ZIP or, after skill-only installation, use the embedded recipe below without depending on external files.
3. Build the semantic structure and wire interactions. Use tokens before choosing visual styling.
4. Test and repair across the acceptance matrix; report actual evidence.

Embedded implementation

<figure id="code-preview-bs-commerce-and-checkout" class="row g-3">
 <div class="card card-body bg-body-tertiary" role="img" aria-label="Static preview of Live example and code">Preview: Live example and code</div>
 <figcaption>Real visual content is progressively loaded for Commerce and checkout; fallback stays visible if graphics cannot run.</figcaption>
</figure>

Framework and integration rules

• npm install bootstrap@^5.3.8 only if necessary and approved in the host project.
• Use data-bs-theme and --bs-* CSS custom properties, customize Sass using functions -> variables -> maps -> mixins ordering.
• Use bootstrap.rtl.min.css with <html dir="rtl" lang="fa">; prefer ms-* / me-* and start/end semantics.
• Media is an enhancement; retain semantic text and a fallback when canvas/video/WebGL is unavailable.
• xs <576, sm >=576, md >=768, lg >=992, xl >=1200, xxl >=1400; mobile first.

Motion / color integration

Choose semantic colors with the original Perfect_AI palette engine and COLOR-SCIENCE-ULTIMATE.md. In strict monochrome contexts, do not add colorful gradients. For Anime.js, scope animation, honor reduced motion and dispose on route transitions. For Three.js, provide static fallback, performance caps and resize camera/renderer correctly. Do not animate layout-critical dimensions on every scroll frame.

Definition of done

• Code is selectable and mobile-scrollable
• Narrow/wide layout, nested containers, RTL/LTR and 400% zoom pass.
• Accessible labels, focus, contrast, keyboard/touch, reduced motion pass.
• Build, tests and targeted browser interaction executed; no uncaught runtime errors.
• Limitations or unimplemented integration endpoints explicitly disclosed.

Official reference: https://getbootstrap.com/docs/5.3/. This is original integration documentation, not a vendor's copied component source.