shopify-polaris-design_skill

Overview

This skill helps design and implement Shopify Admin interfaces using the Polaris Design System (React v13.x). It ensures apps feel native to Shopify, accessible, and predictable for merchants. Use it to structure pages, forms, data tables, and App Bridge integrations so UI matches Shopify Admin conventions.

How this skill works

The skill provides guidance on which Polaris components and layout primitives to use, how to wrap apps with AppProvider, and when to delegate UI behaviors to App Bridge APIs. It explains layout patterns (Page, Layout, Card), data display components (IndexTable, ResourceList), form patterns, design tokens, and deprecated components to avoid. Code examples show typical implementations and App Bridge replacements for deprecated Polaris features.

When to use it

• Building Shopify Apps or Admin extensions that must feel native to Shopify Admin
• Creating settings pages, product or order lists, and merchant-facing forms
• Migrating or maintaining apps that use Polaris React v13.x
• Designing accessible, predictable UI with Shopify design tokens and spacing
• Replacing deprecated Polaris UI with App Bridge equivalents

Best practices

• Wrap your app in <AppProvider i18n={enTranslations}> and use App Bridge for modals, toasts, save bars, navigation, and loading.
• Prefer semantic Polaris components (Button, TextField, IndexTable) over custom divs to preserve accessibility.
• Use layout primitives (Box, BlockStack, InlineStack, InlineGrid) and Polaris props for spacing instead of custom CSS.
• Follow Shopify patterns: primary actions in Page primaryAction, saves via App Bridge Save Bar, and top-right page actions.
• Avoid deprecated components (LegacyCard, Modal, Navigation) and use documented App Bridge replacements.

Example use cases

• Admin product list with bulk actions using IndexTable and useIndexResourceState
• Settings page with annotated layout using Layout.AnnotatedSection and Card
• Form-driven product editor with FormLayout, TextField, Select, and validation errors
• Filtered index view using IndexFilters with ChoiceList and applied filter chips
• Modal confirmations, toast notifications, and loading states implemented via App Bridge APIs