Available1One-Page Site Builder
Turn your product brief into a responsive one-page website and a portable content document. An original, free Skillrove workflow with an editable fictional example.
Codex +2Commerce Product Studiov1.0.0
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.
Jump to a momentExplore the workflow
Made with this SkillA complete product storefront and order-draft handoff
Open full exampleThree original objects · six finishes · working bag and order draft
What you get
A complete product storefront and order-draft handoffWhat you can make
- 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.
Explore delivered files4 groups
index.htmlassets/<finish>.svg + <finish>-detail.svgcatalog.csv + input.jsonhandoff.md + quality.json + delivery-manifest.json
About this skill
Capabilities: ten example views, category/search/sort and empty states, two-angle galleries, finish-specific prices and stock, combined quantity limits, comparison, local bag persistence, coupon and delivery estimates, integer-cent totals, form recovery and actual JSON exports.
Deliverables: the fictional Objects & Hours store with three complete products and six finishes, twelve original SVG product studies, interactive HTML, catalog CSV, editable input, backend handoff, quality records and a SHA-256 manifest.
Read the full workflow
First run: Node.js 22+ without extra packages. Run node scripts/build-store.mjs --input examples/store.json --demo --output ./store-site. Explore products, compare finishes and download the bag and local order JSON.
Validation: actual generation and ZIP execution, independently reconciled discount/shipping/tax cents, stock overflow and sold-out handling, browser form errors and downloaded order JSON, comparison/filter states, 390px layout and deterministic delivery hashes.
Version 1.0.0: original MIT implementation, copy and vector artwork, informed by public storefront benchmarks. The included lamp/cup/clock art presets can be extended. Prices and policies are fictional. Checkout prepares a local draft; payment, authoritative inventory, tax and fulfillment require a real backend. $4.99 one-time; active Premium includes this package.
FROM PACKAGE TO FIRST RESULT
Your first storefront with a complete shopping journey.
Explore Objects & Hours: a sculptural light, a slow-coffee cup and a considered clock. Each has two finish variants, original artwork and complete product copy.
US$4.99 · MIT licenseNode.js 22+ · offline · no extra dependenciesNo API key or paid provider
- 01
Choose your agent
These steps use a project folder. Open the project in your agent and run terminal commands from its root.
Package folder
.agents/skills/commerce-product-studio - 02
Add the package
Download and unzip the package into the folder above. Keep all its files together, with SKILL.md directly inside that folder.
Downloads require a verified account and purchase access. Choose a new folder if this Skill is already installed.
- 03
Run the included sample
Manual sample commands and technical details
Read SKILL.md, review the generator and check its runtime requirements before running:
cd .agents/skills/commerce-product-studio node scripts/build-store.mjs --input examples/store.json --demo --output ./store-siteYour first resultSearch and filter the collection, compare two products, switch a finish and gallery angle, then add quantities within stock. Apply RITUAL10 and compare standard/express totals. Recover from an empty draft form, download real order JSON, then change the form and verify the old prepared draft is cleared.
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.
If store-site already exists, change the output to ./store-site-2. Existing files are never overwritten.
Prefer to ask your agent?
Use Commerce Product Studio at .agents/skills/commerce-product-studio. Read SKILL.md and review scripts/build-store.mjs. Run examples/store.json into a new output folder and show me all generated files. Keep fictional sample content clearly labeled.
Reviews0
Share your first result
Tried this workflow? Help others decide with an honest review.
Before you choose this Skill
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.
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.
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.
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.
More skills to explore
View all skillsAvailable1Codex +2
$4.99One-time purchase