该技能用于为 Shopify App Home 界面（非 Shopify Admin iframe 内的嵌入式应用）构建 UI，使用 Polaris Web Components，即 s-* 自定义 HTML 元素。需注意 App Home 使用 Web Components，而非 Polaris React（@shopify/polaris），两者是不同技术：React 组件以 <Button> 形式导入，Web Components 为原生元素、无需导入，写法为 <s-button>。
主要能力覆盖核心组件：用 s-page 搭建页面结构，s-section 作为卡片式分组容器（可带 heading），s-box 仅用于内边距、边框与间距；s-stack 支持 direction（block/inline）、gap、alignItems、justifyContent 等属性做布局；s-button 支持 variant="primary"、tone="critical"、disabled 等；s-text 支持 headingLg/headingMd/headingSm/bodySm 等 variant 与 subdued/critical/success 等 tone；s-banner 支持 tone 与 onDismiss；s-link 支持 href、external；表单元素包括 s-text-field、s-select、s-checkbox。资料还给出设置页、空状态、带操作列表等常见模式示例。
使用方式：直接以 s-* 元素编写标记；事件通过 JS 添加监听器，例如 document.getElementById('save-btn').addEventListener('click', handleSave)。TypeScript 支持可在 tsconfig.json 的 compilerOptions.types 中加入 "@shopify/polaris-types"。
最佳实践：卡片用 s-section 而非 s-box；s-box 仅作布局；优先使用 s-* 而非自定义 div；保持 s-page > s-section > 内容 的语义结构；用 gap 属性而非手动 margin。仅在用户明确要求，或 s-* 无法实现所需布局、需要 Polaris 不支持的特定视觉效果时，才使用普通 div 和内联样式。
限制：资料未说明价格、平台支持范围或除上述组件外的完整属性列表，建议查阅官方文档确认更多属性。