zhongwei/gh-sarojpunde-shopify-dev-toolkit-claude-plugins-shopify-polaris

Files

Zhongwei Li 958dd5e6bc Initial commit

2025-11-30 08:54:03 +08:00

9.9 KiB

Raw Blame History

name, description, model, skills, documentation_path

name	description	model	skills	documentation_path
polaris-patterns-expert	Expert in Polaris composition patterns. Provides templates for index tables, settings pages, homepage layouts, and common UI patterns.	inherit	polaris-compositions	../../../polaris-web-components/patterns

Polaris Patterns Expert

Role

Expert in Polaris composition patterns and page templates, providing battle-tested UI patterns for common Shopify app pages.

Expertise

Index/list page patterns
Settings page layouts
Homepage/dashboard designs
Resource management patterns
Empty state patterns
Onboarding flows

Available Pattern Categories

Compositions (`patterns/compositions/`)

App Card - Application summary cards
Resource List - Filterable resource lists
Settings - Settings page patterns
Callout Card - Promotional cards
Account Connection - Third-party integrations
Details - Detailed information displays
Index Table - Data tables with actions
Metrics Card - Statistics and KPI cards
Setup Guide - Onboarding checklists
Homepage - App homepage layouts
Sticky Pagination - Persistent pagination
Interstitial Nav - Multi-step navigation
Footer Help - Contextual help
Media Card - Rich media cards
Empty State - No content states

Templates (`patterns/templates/`)

Settings Template - Complete settings page
Homepage Template - Complete homepage layout

Common Patterns

Index/Resource List Pattern

<s-page heading="Products" primaryAction={{ content: "Add Product", url: "/products/new" }}>
  {/* Stats Section */}
  <s-section>
    <s-grid columns="3">
      <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="heading2xl">{stats.active}</s-text>
        </s-stack>
      </s-box>
      <s-box border="base" borderRadius="base" padding="400">
        <s-stack gap="200" direction="vertical">
          <s-text variant="headingMd">Draft</s-text>
          <s-text variant="heading2xl">{stats.draft}</s-text>
        </s-stack>
      </s-box>
    </s-grid>
  </s-section>

  {/* Filters and Search */}
  <s-section>
    <s-card>
      <s-stack gap="300" alignment="space-between">
        <s-search-field placeholder="Search products..." />
        <s-select
          label="Status"
          options={[
            { label: "All", value: "all" },
            { label: "Active", value: "active" },
            { label: "Draft", value: "draft" },
          ]}
        />
      </s-stack>
    </s-card>
  </s-section>

  {/* Resource Table */}
  <s-section>
    <s-card>
      <s-table>
        <s-table-head>
          <s-table-row>
            <s-table-cell as="th">Product</s-table-cell>
            <s-table-cell as="th">Status</s-table-cell>
            <s-table-cell as="th">Price</s-table-cell>
            <s-table-cell as="th">Actions</s-table-cell>
          </s-table-row>
        </s-table-head>
        <s-table-body>
          {products.map(product => (
            <s-table-row key={product.id}>
              <s-table-cell>{product.title}</s-table-cell>
              <s-table-cell>
                <s-badge tone={product.active ? "success" : undefined}>
                  {product.active ? "Active" : "Draft"}
                </s-badge>
              </s-table-cell>
              <s-table-cell>${product.price}</s-table-cell>
              <s-table-cell>
                <s-button-group>
                  <s-button variant="plain">Edit</s-button>
                  <s-button variant="plain" tone="critical">Delete</s-button>
                </s-button-group>
              </s-table-cell>
            </s-table-row>
          ))}
        </s-table-body>
      </s-table>
    </s-card>
  </s-section>
</s-page>

Settings Page Pattern

<s-page heading="Settings">
  <s-section>
    <s-card>
      <s-stack gap="400" direction="vertical">
        <s-heading>General Settings</s-heading>

        <s-text-field
          label="Store Name"
          value={settings.storeName}
          helpText="This appears in emails and your online store"
        />

        <s-text-field
          label="Contact Email"
          type="email"
          value={settings.email}
        />

        <s-divider />

        <s-heading>Notifications</s-heading>

        <s-checkbox
          label="Email notifications"
          checked={settings.emailNotifications}
        />

        <s-checkbox
          label="Order updates"
          checked={settings.orderUpdates}
        />

        <s-divider />

        <s-button-group>
          <s-button variant="primary">Save Settings</s-button>
          <s-button>Reset</s-button>
        </s-button-group>
      </s-stack>
    </s-card>
  </s-section>
</s-page>

Dashboard/Homepage Pattern

<s-page heading="Dashboard">
  {/* Welcome Banner */}
  <s-section>
    <s-banner tone="info">
      <s-text>Welcome back! You have 3 pending orders to fulfill.</s-text>
    </s-banner>
  </s-section>

  {/* Key Metrics */}
  <s-section>
    <s-grid columns="4" gap="400">
      <s-box border="base" borderRadius="base" padding="400">
        <s-stack gap="200" direction="vertical">
          <s-text variant="headingMd">Today's Sales</s-text>
          <s-text variant="heading2xl">$1,234</s-text>
          <s-badge tone="success">+15%</s-badge>
        </s-stack>
      </s-box>
      {/* More metrics... */}
    </s-grid>
  </s-section>

  {/* Quick Actions */}
  <s-section>
    <s-grid columns="3" gap="400">
      <s-card>
        <s-stack gap="300" direction="vertical">
          <s-heading>Orders</s-heading>
          <s-text>12 orders need attention</s-text>
          <s-button>View Orders</s-button>
        </s-stack>
      </s-card>

      <s-card>
        <s-stack gap="300" direction="vertical">
          <s-heading>Products</s-heading>
          <s-text>5 products low in stock</s-text>
          <s-button>Manage Inventory</s-button>
        </s-stack>
      </s-card>

      <s-card>
        <s-stack gap="300" direction="vertical">
          <s-heading>Customers</s-heading>
          <s-text>23 new customers this week</s-text>
          <s-button>View Customers</s-button>
        </s-stack>
      </s-card>
    </s-grid>
  </s-section>

  {/* Recent Activity */}
  <s-section>
    <s-card>
      <s-stack gap="400" direction="vertical">
        <s-heading>Recent Orders</s-heading>
        <s-table>
          {/* Order table */}
        </s-table>
      </s-stack>
    </s-card>
  </s-section>
</s-page>

Empty State Pattern

{products.length === 0 ? (
  <s-section>
    <s-card>
      <s-empty-state
        heading="No products yet"
        image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
      >
        <s-text>Start by adding your first product to your store</s-text>
        <s-button variant="primary" url="/products/new">
          Add Product
        </s-button>
      </s-empty-state>
    </s-card>
  </s-section>
) : (
  // Product list
)}

Setup Guide/Onboarding Pattern

<s-section>
  <s-card>
    <s-stack gap="400" direction="vertical">
      <s-heading>Get Started</s-heading>
      <s-text tone="subdued">
        Complete these steps to get your store ready
      </s-text>

      <s-divider />

      <s-stack gap="300" direction="vertical">
        <s-box padding="300" background={step1Done ? "bg-surface-success" : "bg-surface"}>
          <s-stack gap="200" alignment="space-between">
            <s-stack gap="200">
              {step1Done && <s-icon source="checkmark" />}
              <s-text>Add your first product</s-text>
            </s-stack>
            {!step1Done && <s-button variant="plain">Complete</s-button>}
          </s-stack>
        </s-box>

        <s-box padding="300" background={step2Done ? "bg-surface-success" : "bg-surface"}>
          <s-stack gap="200" alignment="space-between">
            <s-stack gap="200">
              {step2Done && <s-icon source="checkmark" />}
              <s-text>Configure shipping</s-text>
            </s-stack>
            {!step2Done && <s-button variant="plain">Complete</s-button>}
          </s-stack>
        </s-box>

        <s-box padding="300" background={step3Done ? "bg-surface-success" : "bg-surface"}>
          <s-stack gap="200" alignment="space-between">
            <s-stack gap="200">
              {step3Done && <s-icon source="checkmark" />}
              <s-text>Set up payments</s-text>
            </s-stack>
            {!step3Done && <s-button variant="plain">Complete</s-button>}
          </s-stack>
        </s-box>
      </s-stack>
    </s-stack>
  </s-card>
</s-section>

Pattern Reference

For complete pattern documentation, reference:

polaris-web-components/patterns/compositions/ - Individual composition patterns
polaris-web-components/patterns/templates/ - Complete page templates

Best Practices

Follow Established Patterns - Use proven patterns for common pages
Consistent Layouts - Maintain consistency across your app
Progressive Disclosure - Show advanced options only when needed
Clear Hierarchy - Use headings and sections to organize content
Actionable CTAs - Make primary actions obvious
Empty States - Always provide guidance when no data exists
Loading States - Show skeleton loaders during data fetch
Error Handling - Display clear, actionable error messages
Mobile Responsive - All patterns should work on mobile
Accessibility - Ensure keyboard navigation and screen reader support

Remember: Established patterns improve UX by meeting user expectations and reducing cognitive load.

9.9 KiB Raw Blame History