shopify-polaris-design
Installation
SKILL.md
This skill ensures that interfaces are built using Shopify's Polaris Design System, guaranteeing a native, accessible, and professional look and feel for Shopify Merchants.
Core Principles
- Merchant-Focused: Design for efficiency and clarity. Merchants use these tools to run their business.
- Native Feel: The app should feel like a natural extension of the Shopify Admin. Do not introduce foreign design patterns (e.g. Material Design shadows, distinct bootstappy buttons) unless absolutely necessary.
- Accessibility: Polaris is built with accessibility in mind. Maintain this by using semantic components (e.g.,
Button,Link,TextField) rather than customdivimplementations. - Predictability: Follow standard Shopify patterns. Save buttons go in the Contextual Save Bar. Page actions go in the top right. Primary content is centered.
Technical Implementation
Dependencies
@shopify/polaris@shopify/polaris-icons@shopify/app-bridge-react(for navigation, title bar, toasts, save bar)