polaris-compositions

# Polaris Compositions Skill

## Purpose
Provides complete page templates and composition patterns for common Shopify app layouts using Polaris Web Components.

## When This Skill Activates
- Creating new pages or views
- Building index/list pages
- Implementing settings interfaces
- Designing dashboards
- Creating resource management UIs

## Available Patterns

Reference: `polaris-web-components/patterns/compositions/`

### Composition Patterns

1. **App Card** - Application summary cards with actions
2. **Resource List** - Filterable, sortable resource lists
3. **Settings** - Settings page layouts with sections
4. **Callout Card** - Promotional or informational cards
5. **Account Connection** - Third-party service integrations
6. **Details** - Detailed information displays
7. **Index Table** - Data tables with bulk actions
8. **Metrics Card** - Statistics and KPI displays
9. **Setup Guide** - Onboarding checklists
10. **Homepage** - App homepage/dashboard layouts
11. **Sticky Pagination** - Persistent pagination controls
12. **Interstitial Nav** - Multi-step navigation flows
13. **Footer Help** - Contextual help sections
14. **Media Card** - Rich media content cards
15. **Empty State** - No content placeholders

## Complete Page Templates

### Index/List Page Template

**Use for**: Products, Orders, Customers, Collections

```tsx
<s-page
  heading="Products"
  primaryAction={{ content: "Add Product", url: "/products/new" }}
>
  {/* Stats Cards */}
  <s-section>
    <s-grid columns="1" md-columns="3" gap="400">
      <s-box border="base" borderRadius="base" padding="400">
        <s-stack gap="200" direction="vertical">
          <s-text variant="headingMd">Total Products</s-text>
          <s-text variant="heading2xl">{stats.total}</s-text>
        </s-stack>
      </s-box>

      <s-box border="base" borderRadius="base" padding="400">
        <s-stack gap="200" direction="vertical">
          <s-text variant="headingMd">Active</s-text>
          <s-text variant="