What problem does it solve?
Styling React components in the Saleor Dashboard codebase requires choosing between Box inline props and CSS Modules, using the correct design tokens, and following established component patterns like DetailGroupBox, DetailSettingsCard, and PriceFieldV2. This Skill encodes those conventions so generated or refactored UI code matches the project's design system instead of introducing inline styles, hardcoded colors, or legacy patterns.
Core Features & Use Cases
- Two styling strategies: Guides when to use
<Box> sprinkle props from @saleor/macaw-ui-next for simple layout/spacing versus .module.css files for pseudo-selectors, animations, and media queries.
- Design token enforcement: Directs usage of
var(--mu-*) CSS variables and the vars TypeScript object instead of hardcoded colors, spacing, or borders.
- Component pattern library: Covers foldable sections with DetailGroupBox, settings cards with DetailSettingsCard, assignable lists, channel amount lists, and PriceFieldV2 money inputs with spreadsheet paste support.
- Use Case: When adding a new settings card to a product detail page, the Skill ensures you use DetailSettingsCard with the correct title typography, compact label rows, and token-based spacing rather than ad-hoc CSS.
Quick Start
Style this new React component for the Saleor Dashboard following the macaw-ui design system conventions.
