# Commerce Product Studio

Build a complete concept storefront that makes products worth exploring. Create original product studies, searchable collections, finish variants, stock-aware bags, comparison views and a real downloadable order draft.

Canonical page: https://skillrove.dev/skills/commerce-product-studio
Version: 1.0.0
Package price: USD 4.99 per individual package
Installation hosts: Codex, Claude Code, Cursor
Output: A complete product storefront and order-draft handoff

## What it does

- Build a concept storefront with original product studies and searchable collections.
- Try finish variants, stock-aware bags, comparisons and delivery estimates.
- Export an actual order draft with integer-cent totals and form recovery.

Best suited to: Designers exploring a complete product-browsing and order-draft experience.

Scope limits: A concept storefront, not a live inventory, payment or order-fulfillment service.

## Documented deliverables and requirements

- index.html
- assets/ finish .svg + finish -detail.svg
- catalog.csv + input.json
- handoff.md + quality.json + delivery-manifest.json

Runtime requirements: Node.js 22+ · offline · no extra dependencies

Working example: https://skillrove.dev/skillrove/samples/commerce-product-studio/v1.0.0/index.html

Node.js 22+ standard library, tested on 24.15.0. All products, availability and policies are fictional. The bag stores SKU quantities and preferences only; customer draft fields stay in the current form. No order, payment or email is submitted. Extend the artwork module for other object types.

## Questions before installation

### How do I get Commerce Product Studio?

The listed individual package price is USD 4.99. Premium downloads require a confirmed purchase or active membership. Your agent subscription, model access and external provider credits are separate.

- [Compare access and pricing](https://skillrove.dev/pricing)

### Which agents can use this skill?

This release lists Codex, Claude Code, Cursor as intended installation hosts. Check the package’s dependencies and permissions before running it. These labels do not certify that every workflow has been tested in every agent.

- [Codex setup](https://skillrove.dev/skills/agent/codex)
- [Claude Code setup](https://skillrove.dev/skills/agent/claude-code)
- [Cursor setup](https://skillrove.dev/skills/agent/cursor)

### What files can this workflow generate?

The documented 1.0.0 workflow lists: index.html; assets/ finish .svg + finish -detail.svg; catalog.csv + input.json; handoff.md + quality.json + delivery-manifest.json. Some files or exports are optional; follow the package’s setup and inspect the delivered result.

- [Review all deliverables](https://skillrove.dev/skills/commerce-product-studio#skill-what-you-get)
- [Inspect the working example](https://skillrove.dev/skillrove/samples/commerce-product-studio/v1.0.0/index.html)

### What should I check before using the result?

Node.js 22+ standard library, tested on 24.15.0. All products, availability and policies are fictional. The bag stores SKU quantities and preferences only; customer draft fields stay in the current form. No order, payment or email is submitted. Extend the artwork module for other object types.

- [Read the installation guide](https://skillrove.dev/guides/how-to-install-a-claude-skill)
- [Review third-party notices](https://skillrove.dev/third-party-notices)

## Source and access

These facts come from the public Skillrove catalog and the documented active release. Agent labels describe intended installation hosts, not certification across every model. Package licenses apply; model accounts, provider credits and credentials are separate. Public facts do not grant download access.

[Installation guide](https://skillrove.dev/install/agent.md) · [Support](https://skillrove.dev/contact)