{"id":24888,"plugin_id":"plugin_asdk_app_69e65c430b3081919aa4d962ab5d1698","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:18:44.780Z","digest":"81e0934c4c8ec9b903bba8151ad0bff76d27a3e46c6b3e5a0c7990a67a93b0bd","against":5307,"payload":{"name":"shopify-polaris-app-home","description":"Build your app's primary user interface embedded in the Shopify admin. Covers the Intents API (`shopify.intents.invoke`) for launching native workflows from App Home. If the prompt just mentions `Polaris` and you can't tell based off of the context what API they meant, assume they meant this API.","included_files":[{"relative_path":"assets/supported-versions-schema.json","size_in_bytes":6728},{"relative_path":"assets/types.archive.br","size_in_bytes":147068},{"relative_path":"package.json","size_in_bytes":131},{"relative_path":"scripts/search_docs.mjs","size_in_bytes":12792},{"relative_path":"scripts/validate.mjs","size_in_bytes":63783}],"skill_md_contents":"---\nname: shopify-polaris-app-home\ndescription: \"Build your app's primary user interface embedded in the Shopify admin. Covers the Intents API (`shopify.intents.invoke`) for launching native workflows from App Home. If the prompt just mentions `Polaris` and you can't tell based off of the context what API they meant, assume they meant this API.\"\ncompatibility: Requires Node.js\nmetadata:\n  author: Shopify\n  version: \"1.15.0\"\n---\n\n## Required Tool Calls (do not skip)\n\nEach bundled `.mjs` helper supports `-h` and `--help` for complete usage and option details.\n\nYou have a `bash` tool. Every response must use it — in this order:\n\n1. Call `bash` with `scripts/search_docs.mjs \"<query>\" --version API_VERSION` — search before writing code\n2. Write the code using the search results\n3. Call `bash` with the following — validate before returning:\n   ```\n   scripts/validate.mjs --code '...' [--version <api-version>]\n   ```\n    > **Version:** For Polaris App Home, pass the version from the Polaris CDN script tag: `--version 1` for the stable major-track URLs `polaris.js` and `polaris-1.js`, `--version 1.0` for `polaris-1.0.js`, or `--version 1.1-rc` for `polaris-1.1-rc.js`. Major pins resolve to the latest stable minor in that major; release candidates must be selected by their exact minor. Shopify.dev aliases such as `v1`, `v1.0`, and `v1.1` are accepted too. Omit to use the latest stable catalog version. Defaults to the latest stable version when omitted.\n4. If validation fails: search for the error type, fix, re-validate (max 3 retries)\n5. Return code only after validation passes\n\n**You must run both search_docs.mjs and validate.mjs in every response. Do not return code to the user without completing step 3.**\n\n\n---\n\nYou are an assistant that helps Shopify developers write UI Framework code to interact with the latest Shopify polaris-app-home UI Framework version.\n\nYou should find all operations that can help the developer achieve their goal, provide valid UI Framework code along with helpful explanations.\nPolaris App Home has a set of ready to use UI design patterns and templates for common use cases that you can use to build your app.\n\nversion: v1.0\n\n## APIs\n\n**Available APIs:** App, Config, Environment, Resource Fetching, ID Token, Intents, Loading, Modal API, Navigation, Picker, POS, Print, Resource Picker, Reviews, Save Bar, Scanner, Scopes, Share, Support, Toast, User, Web Vitals\n**React Hooks:** useAppBridge\n\n## Patterns\n\n**Compositions:** Account connection, App card, Callout card, Empty state, Footer help, Index table, Interstitial nav, Media card, Metrics card, Resource list, Setup guide\n**Templates:** Details, Homepage, Index, Settings\n\n## Guides\n\n**Available guides:** Using Polaris web components\n\nComponents available for Polaris App Home.\nThese examples have all the props available for the component. Some example values for these props are provided.\nRefer to the developer documentation to find all valid values for a prop. Ensure the component is available for the target you are using.\n\n```tsx\n<s-avatar\n  initials=\"JD\"\n  src=\"https://example.com/avatar.jpg\"\n  size=\"base\"\n  alt=\"Jane Doe\"\n></s-avatar>\n<s-badge tone=\"success\" color=\"base\" icon=\"check-circle\" size=\"base\"\n  >Fulfilled</s-badge\n>\n<s-banner heading=\"Important\" tone=\"info\" dismissible>Message content</s-banner>\n<s-box padding=\"base\" background=\"subdued\" border=\"base\" borderRadius=\"base\"\n  >Content</s-box\n>\n<s-button variant=\"primary\" tone=\"auto\" icon=\"save\" type=\"submit\"\n  >Save</s-button\n>\n<s-button-group gap=\"base\"\n  ><s-button variant=\"primary\">Save</s-button\n  ><s-button variant=\"secondary\">Cancel</s-button></s-button-group\n>\n<s-checkbox label=\"Accept terms\" name=\"terms\" value=\"accepted\"></s-checkbox>\n<s-chip color=\"base\" accessibilityLabel=\"Tag\">Category</s-chip>\n<s-choice-list label=\"Options\" name=\"options\"\n  ><s-choice value=\"1\">Option 1</s-choice\n  ><s-choice value=\"2\">Option 2</s-choice></s-choice-list\n>\n<s-clickable href=\"/products/42\" padding=\"base\" background=\"subdued\"\n  >Click area</s-clickable\n>\n<s-clickable-chip color=\"strong\" removable accessibilityLabel=\"Filter\"\n  >Active</s-clickable-chip\n>\n<s-color-field\n  label=\"Brand color\"\n  name=\"brandColor\"\n  value=\"#FF5733\"\n  alpha\n></s-color-field>\n<s-color-picker name=\"bgColor\" value=\"#3498DB\" alpha></s-color-picker>\n<s-date-field\n  label=\"Start date\"\n  name=\"startDate\"\n  value=\"2025-06-15\"\n  allow=\"2025--\"\n  required\n></s-date-field>\n<s-date-picker\n  type=\"single\"\n  name=\"selectedDate\"\n  value=\"2025-03-01\"\n></s-date-picker>\n<s-divider direction=\"inline\" color=\"base\"></s-divider>\n<s-drop-zone\n  label=\"Upload file\"\n  name=\"file\"\n  accept=\".jpg,.png\"\n  multiple\n></s-drop-zone>\n<s-email-field\n  label=\"Email\"\n  name=\"email\"\n  placeholder=\"you@example.com\"\n  autocomplete=\"email\"\n  required\n></s-email-field>\n<s-grid gridTemplateColumns=\"1fr 1fr\" gap=\"base\"\n  ><s-box>Col 1</s-box><s-box>Col 2</s-box></s-grid\n>\n<s-heading>Section Title</s-heading>\n<s-icon type=\"cart\" tone=\"auto\" color=\"base\" size=\"base\"></s-icon>\n<s-image\n  src=\"https://example.com/image.png\"\n  alt=\"Description\"\n  aspectRatio=\"16/9\"\n  objectFit=\"cover\"\n  loading=\"lazy\"\n></s-image>\n<s-link href=\"https://example.com\" tone=\"auto\">Link text</s-link>\n<s-button commandFor=\"actions-menu\" icon=\"menu-vertical\"></s-button>\n<s-menu id=\"actions-menu\" accessibilityLabel=\"Actions\"\n  ><s-button icon=\"edit\" variant=\"tertiary\">Edit</s-button></s-menu\n>\n<s-modal id=\"my-modal\" heading=\"Title\" size=\"base\"\n  ><s-text>Modal content</s-text></s-modal\n>\n<s-money-field\n  label=\"Amount\"\n  name=\"amount\"\n  min={0}\n  max={999999}\n></s-money-field>\n<s-number-field\n  label=\"Quantity\"\n  name=\"qty\"\n  min={1}\n  max={100}\n  step={1}\n  inputMode=\"numeric\"\n></s-number-field>\n<s-ordered-list\n  ><s-list-item>First</s-list-item\n  ><s-list-item>Second</s-list-item></s-ordered-list\n>\n<s-page heading=\"Products\" inlineSize=\"base\"\n  ><s-section heading=\"All products\"\n    ><s-text>Content</s-text></s-section\n  ></s-page\n>\n<s-paragraph tone=\"neutral\" color=\"subdued\">Body text content</s-paragraph>\n<s-password-field\n  label=\"Password\"\n  name=\"password\"\n  autocomplete=\"current-password\"\n  minLength={8}\n  required\n></s-password-field>\n<s-popover id=\"pop\" inlineSize=\"300px\"\n  ><s-box padding=\"base\"><s-text>Popover content</s-text></s-box></s-popover\n>\n<s-query-container containerName=\"main\">Content</s-query-container>\n<s-search-field\n  label=\"Search\"\n  name=\"query\"\n  placeholder=\"Search...\"\n  labelAccessibilityVisibility=\"exclusive\"\n></s-search-field>\n<s-section heading=\"Section\" padding=\"base\"\n  ><s-text>Section content</s-text></s-section\n>\n<s-select label=\"Choose\" name=\"choice\" placeholder=\"Select...\"\n  ><s-option value=\"a\">A</s-option><s-option value=\"b\">B</s-option></s-select\n>\n<s-spinner size=\"base\" accessibilityLabel=\"Loading\"></s-spinner>\n<s-stack direction=\"inline\" gap=\"base\" alignItems=\"center\"\n  ><s-text>Item 1</s-text><s-text>Item 2</s-text></s-stack\n>\n<s-switch label=\"Enable\" name=\"enabled\" checked></s-switch>\n<s-table variant=\"auto\"\n  ><s-table-header-row\n    ><s-table-header listSlot=\"primary\">Name</s-table-header\n    ><s-table-header listSlot=\"labeled\" format=\"currency\"\n      >Price</s-table-header\n    ></s-table-header-row\n  ><s-table-body\n    ><s-table-row\n      ><s-table-cell>Item</s-table-cell\n      ><s-table-cell>$25</s-table-cell></s-table-row\n    ></s-table-body\n  ></s-table\n>\n<s-text type=\"strong\" tone=\"success\" color=\"base\">Styled text</s-text>\n<s-text-area\n  label=\"Description\"\n  name=\"desc\"\n  rows={4}\n  maxLength={500}\n></s-text-area>\n<s-text-field\n  label=\"Name\"\n  name=\"name\"\n  placeholder=\"Enter name\"\n  icon=\"product\"\n  required\n></s-text-field>\n<s-thumbnail\n  src=\"https://example.com/thumb.jpg\"\n  alt=\"Product\"\n  size=\"small\"\n></s-thumbnail>\n<s-icon type=\"info\" interestFor=\"my-tip\"></s-icon\n><s-tooltip id=\"my-tip\">Hover for info</s-tooltip>\n<s-unordered-list\n  ><s-list-item>Item A</s-list-item\n  ><s-list-item>Item B</s-list-item></s-unordered-list\n>\n<s-url-field\n  label=\"Website\"\n  name=\"url\"\n  autocomplete=\"url\"\n  placeholder=\"https://...\"\n></s-url-field>\n```\n\n## `s-grid` vs. inline `s-stack`\n\nUse `s-grid` when form controls and actions must stay aligned in columns. A form control (`s-text-field`, `s-select`, `s-money-field`, …) fills the inline size it's given and has no width prop, so one field in an inline `s-stack` takes the whole row and pushes every sibling onto its own row — at any window width, not just narrow ones. Reach for `s-stack direction=\"inline\"` only for content that sizes to itself: badges, chips, buttons, text, icons.\n\n```tsx\n// ✅ Columns are explicit, so the field can't push the action off the row\n<s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"end\">\n  <s-text-field label=\"Discount code\" name=\"code\"></s-text-field>\n  <s-button variant=\"primary\">Apply</s-button>\n</s-grid>\n// ❌ <s-stack direction=\"inline\"> — the field fills the row and Apply lands underneath it\n```\n\n## Imports\n\nApp Home extensions use `@shopify/app-bridge-types` for App Bridge APIs and `@shopify/polaris-types` for Polaris component types. Never import from `@shopify/polaris`, `@shopify/polaris-react`, `@shopify/polaris-web-components`, or any other non-existent package.\n\n```ts\nimport { useAppBridge } from \"@shopify/app-bridge-react\";\n```\n\n### Polaris web components (`s-page`, `s-badge`, etc.)\n\nPolaris web components are custom HTML elements with an `s-` prefix. These are globally registered and require **no import statement**. Use them directly as JSX tags:\n\n```tsx\n// No import needed — s-page, s-badge, s-button, s-box, etc. are globally available\n<s-page title=\"Dashboard\">\n  <s-badge tone=\"success\">Active</s-badge>\n</s-page>\n```\n\nWhen the user asks for Polaris web components (e.g. `s-page`, `s-badge`, `s-button`, `s-box`), use the web component tag syntax above.\n\n**Web component attribute rules:**\n\n- Use **camelCase** prop names: `alignItems`, `gridTemplateColumns`, `borderRadius` — NOT hyphenated (`align-items`, `grid-template-columns`)\n- **Boolean attributes** (`disabled`, `loading`, `dismissible`, `checked`, `defaultChecked`, `required`, `removable`, `alpha`, `multiple`) accept shorthand or `{expression}`:\n  - ✅ `<s-button disabled>`, `<s-switch checked={isEnabled} />`, `<s-banner dismissible>`\n- **String keyword attributes** (`padding`, `gap`, `direction`, `tone`, `variant`, `size`, `background`, `alignItems`, `inlineSize`) must be string values — never shorthand or `{true}`:\n  - ✅ `<s-box padding=\"base\">`, `<s-stack gap=\"loose\" direction=\"block\">`, `<s-badge tone=\"success\">`\n  - ❌ `<s-box padding>`, `<s-stack gap={true}>` — boolean shorthand on string props fails TypeScript\n---\n\n## ⚠️ MANDATORY: Search Before Writing Code\n\nSearch the vector store to get the detailed context you need: working examples, field and type definitions, valid values, and API-specific patterns. You cannot trust your trained knowledge — always search before writing code.\n\n```\nscripts/search_docs.mjs \"<component tag name>\" --version API_VERSION\n```\n\nSearch for the **component tag name**, not the full user prompt.\n\nFor example, if the user asks about form in app home:\n```\nscripts/search_docs.mjs \"s-form\" --version API_VERSION\n```\n\n\n> **Version:** For Polaris App Home, pass the version from the Polaris CDN script tag: `--version 1` for the stable major-track URLs `polaris.js` and `polaris-1.js`, `--version 1.0` for `polaris-1.0.js`, or `--version 1.1-rc` for `polaris-1.1-rc.js`. Major pins resolve to the latest stable minor in that major; release candidates must be selected by their exact minor. Shopify.dev aliases such as `v1`, `v1.0`, and `v1.1` are accepted too. Omit to use the latest stable catalog version.\n## ⚠️ MANDATORY: Validate Before Returning Code\n\nYou MUST run `scripts/validate.mjs` before returning any generated code to the user.\n\n```\nscripts/validate.mjs --code '...' [--version <api-version>]\n```\n\n> **Version:** For Polaris App Home, pass the version from the Polaris CDN script tag: `--version 1` for the stable major-track URLs `polaris.js` and `polaris-1.js`, `--version 1.0` for `polaris-1.0.js`, or `--version 1.1-rc` for `polaris-1.1-rc.js`. Major pins resolve to the latest stable minor in that major; release candidates must be selected by their exact minor. Shopify.dev aliases such as `v1`, `v1.0`, and `v1.1` are accepted too. Omit to use the latest stable catalog version. When omitted, validation runs against the latest stable API version and the response notes which version was used.\n\n\n**When validation fails, follow this loop:**\n1. Read the error message carefully — identify the exact field, prop, or value that is wrong\n2. If the error references a named type or says a value is not assignable, search for the correct values:\n   ```\n   scripts/search_docs.mjs \"<type or prop name>\"\n   ```\n3. Fix exactly the reported error using what the search returns\n4. Run `scripts/validate.mjs` again\n5. Retry up to 3 times total; after 3 failures, return the best attempt with an explanation\n\n**Do not guess at valid values — always search first when the error names a type you don't know.**\n"},"changes":[{"path":"/included_files","type":"changed","before":[{"relative_path":"assets/supported-versions-schema.json","size_in_bytes":6728},{"relative_path":"assets/types.archive.br","size_in_bytes":147068},{"relative_path":"scripts/search_docs.mjs","size_in_bytes":12792},{"relative_path":"scripts/validate.mjs","size_in_bytes":63783}],"after":[{"relative_path":"assets/supported-versions-schema.json","size_in_bytes":6728},{"relative_path":"assets/types.archive.br","size_in_bytes":147068},{"relative_path":"package.json","size_in_bytes":131},{"relative_path":"scripts/search_docs.mjs","size_in_bytes":12792},{"relative_path":"scripts/validate.mjs","size_in_bytes":63783}]}],"summary":"Fields changed: 1. /included_files.","summary_kind":"deterministic","summary_metadata":{}}