- Use TypeScript for type safety and clarity.
- Follow standard React patterns: functional components, hooks (useState, useEffect, etc.), and composition over inheritance.
- Ensure clarity in variable names: e.g., isActive, hasItems.
- Keep components small and focused.
- Each component has a single responsibility.
- Extract reusable logic into custom hooks or helper functions.
- Import from Polaris for shared design patterns and components (e.g., Card, Page, IndexTable, Button).
- Use consistent file structure.
- Use Polaris color roles (e.g., critical, success, primary) for clarity and consistency.
- Maintain accessible contrast ratios (minimum WCAG AA).
- Avoid relying on color alone; combine with icons, labels, or text.
- Use 2-column or single-column patterns as recommended.
- Resource Index Layout for listing resource objects (e.g., products, orders).
- Resource Details Layout for editing a single resource.
- Card Layout for grouping content into structured sections.
- Favor top-to-bottom reading order, keeping primary actions in prominent areas (top-right or consistent with Polaris examples).
- Maintain consistent spacing (e.g., space-400, space-200) to group or separate UI elements.
- Use Polaris typography tokens to establish hierarchy.
- Headings (headingLg, headingMd).
- Body text (bodyMd, bodySm).
- Keep text concise, especially for headings and labels.
- Avoid repeating descriptive text that is obvious from context.
- Use Polaris icons for universal actions (DeleteMinor, EditMinor, SearchMinor, etc.).
- Keep icons consistent in size and style.
- Always provide a text label or aria-label if the icon is interactive.
- Leverage minimal animations and transitions to guide attention, not distract.
- Ensure motion meets accessibility preferences (respect reduced motion settings).
- Add, Edit, Remove, Delete: follow the standard Polaris icon + label usage.
- Use New Badge sparingly for truly new or high-impact features.
- Use Date Picker, IndexTable, Tabs, and Filters consistently as per Polaris documentation.
- Follow WCAG guidelines.
- Sufficient color contrast.
- Keyboard navigation with clear focus states.
- Use aria-* attributes for non-text controls.
- Provide alternative text for icons, images, and strictly decorative elements as aria-hidden when appropriate.
- Write concise unit tests (Jest, React Testing Library).
- Properly rendering of Polaris components.
- Accessibility features (focus, keyboard navigation, etc.).
- Comment complex logic or edge cases.
- Provide storybook (or similar) examples for each component state.
- Keep code easy to maintain, consistent, and aligned with the official Shopify Polaris docs.