Convert a Claude Design export (from design.claude.com) representing a shop / collection / product-listing page into a SureCart surecart/product-list block with its full inner template (sort + filter + search + product-template grid + pagination + no-products fallback). ALSO ships an upstream INTAKE MODE (v0.8+): when invoked empty (no attached design), the skill runs a small 2-batch questionnaire and emits a constraint-aware Claude Design prompt the merchant pastes into design.claude.com — closing the merchant-to-markup loop for shop pages. Use when the merchant attaches a Claude Design project (zip / unzipped JSX/CSS / screenshot / URL) of a multi-product page and asks for shop-page markup, OR invokes empty to generate a design prompt. Output is one fenced html block of Gutenberg block markup the merchant pastes into the WordPress block editor — no MCP, no API keys, no server calls. Sibling skill to surecart-design-to-blocks (which targets single-product detail pages); they share the same emission conventions and validation rubric structure.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryContent & writingStars0
About this skill
Convert a Claude Design export (from design.claude.com) representing a shop / collection / product-listing page into a SureCart surecart/product-list block with its full inner template (sort + filter + search + product-template grid + pagination + no-products fallback). ALSO ships an upstream INTAKE MODE (v0.8+): when invoked empty (no attached design), the skill runs a small 2-batch questionnaire and emits a constraint-aware Claude Design prompt the merchant pastes into design.claude.com — closing the merchant-to-markup loop for shop pages. Use when the merchant attaches a Claude Design project (zip / unzipped JSX/CSS / screenshot / URL) of a multi-product page and asks for shop-page markup, OR invokes empty to generate a design prompt. Output is one fenced html block of Gutenberg block markup the merchant pastes into the WordPress block editor — no MCP, no API keys, no server calls. Sibling skill to surecart-design-to-blocks (which targets single-product detail pages); they share the same emission conventions and validation rubric structure.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Convert a Claude Design export (from design.claude.com) representing a shop / collection / product-listing page into a SureCart `surecart/product-list` block with its full inner template (sort + filter + search + product-template grid + pagination + no-products fallback). ALSO ships an upstream INTAKE MODE (v0.8+): when invoked empty (no attached design), the skill runs a small 2-batch questionnaire and emits a constraint-aware Claude Design prompt the merchant pastes into design.claude.com — closing the merchant-to-markup loop for shop pages. Use when the merchant attaches a Claude Design project (zip / unzipped JSX/CSS / screenshot / URL) of a multi-product page and asks for shop-page markup, OR invokes empty to generate a design prompt. Output is one fenced ```html block of Gutenberg block markup the merchant pastes into the WordPress block editor — no MCP, no API keys, no server calls. Sibling skill to `surecart-design-to-blocks` (which targets single-product detail pages); they share the same emission conventions and validation rubric structure.
About this listing
Category
Content & writing
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI