How do I access design tokens in TypeScript?

You can import the 'vars' object from @saleor/macaw-ui-next, which provides typed access to the full spacing and color contract used by the theme.

When should I use Box props instead of CSS Modules?

Use Box props for simple layout, spacing, and color adjustments. Switch to CSS Modules for complex requirements like pseudo-selectors, animations, or when an element requires more than five CSS rules.

Does this skill support responsive design?

Yes, it supports responsive Box props for layouts and provides patterns for implementing media queries within scoped CSS Modules.

What is the primary styling system for the Saleor Dashboard?

The Saleor Dashboard uses the Macaw-UI design system, specifically leveraging @saleor/macaw-ui-next for both component-based styling and CSS design tokens.

Are inline styles allowed in Saleor Dashboard components?

No, inline 'style' attributes are considered an anti-pattern. Developers should always use Box props or CSS Modules to maintain consistency and theme support.

Saleor Dashboard Styling

Name: Saleor Dashboard Styling
Author: saleor

bysaleor

•

990

•

设计工具

Standardizes UI component styling for the Saleor Dashboard using the Macaw-UI design system and CSS Modules.

This skill provides comprehensive guidance for developers building or refactoring Saleor Dashboard components, ensuring visual consistency through the Macaw-UI design system. It streamlines the styling process by offering two distinct strategies: using inline Box props for rapid layout and spacing adjustments, or CSS Modules for complex visual requirements like animations and pseudo-selectors. By enforcing the use of design tokens and preventing anti-patterns like hardcoded colors, it ensures that every UI contribution remains theme-compatible and maintainable within the Saleor ecosystem.

主要功能

01Dual-strategy styling logic for choosing between inline Box props and CSS Modules.

02Prevention of common anti-patterns such as inline styles and hardcoded color values.

03Standardized Macaw-UI design token implementation for colors, spacing, and typography.

04990 GitHub stars

05TypeScript-safe access to design system tokens and theme variables.

06Built-in support for responsive design using mobile, tablet, and desktop breakpoints.

使用场景

01Building new React components that must adhere to the Saleor design language.

02Refactoring legacy Dashboard components to use modern Macaw-UI-next layouts.

03Implementing complex UI states and animations using scoped CSS Modules.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add saleor/saleor-dashboard saleor-dashboard-styles

For use in Claude.ai and ChatGPT

Download Skill