app-shopify-polaris-web-components
Shopify Polaris Web Components
Use this skill when building UI for Shopify App Home surfaces using Polaris Web Components.
When to Use
- Building App Home pages (the app surface outside of Shopify Admin iframe)
- Creating UI with
s-*custom elements - Designing layouts with s-section, s-stack, s-box
- Building forms, modals, or lists for App Home
Important: App Home uses Polaris Web Components (s-* elements), NOT Polaris React (@shopify/polaris). These are different technologies.
Polaris React vs Web Components
| Feature | Polaris React | Polaris Web Components |
|---|---|---|
| Use for | Embedded admin apps | App Home surfaces |
| Import | @shopify/polaris |
No import (native elements) |
More from niccos-shopify-workspace/shopify-cursor-skills
theme-shopify-liquid-templates
Liquid template best practices for Shopify themes - snippets, logic, image handling, and SVG usage. Use when writing or modifying Liquid templates in Shopify themes.
80theme-shopify-css-guidelines
CSS naming conventions (BEM), nesting rules, and encapsulation guidelines for Shopify themes. Use when writing CSS for Shopify theme sections.
50theme-shopify-section-structure
Shopify theme section structure, file organization, and schema requirements. Use when creating or modifying Shopify theme sections.
49theme-shopify-javascript-standards
JavaScript standards for Shopify themes - custom elements, file structure, and best practices. Use when writing JavaScript for Shopify theme sections.
43app-shopify-admin-graphql
Execute Shopify Admin API calls via GraphQL in Shopify Remix apps. Use when querying or mutating Shopify data (customers, orders, products, shop, segments, subscriptions), when writing GraphQL for the Admin API, or when handling throttling and retries.
35theme-shopify-html-data-comments
HTML structure, data attributes, and commenting guidelines for Shopify themes. Use when structuring HTML markup and adding comments to Shopify theme code.
32