Shopify Css Guidelines

What it does

This skill provides access to and applies Shopify's CSS guidelines. It ensures generated or modified CSS code adheres to Shopify’s established standards for consistency and maintainability across their platform. The skill can be used to validate existing CSS, generate new CSS snippets, or refactor existing code to align with these guidelines.

When to use it

• Creating custom Shopify themes: Ensure your theme's CSS is consistent with the overall Shopify design system.
• Refactoring legacy CSS: Modernize older CSS codebases by aligning them with current Shopify best practices.
• Generating CSS components: Quickly create reusable CSS components that adhere to Shopify’s style guide.
• Validating existing CSS: Check if your current CSS implementation conforms to the official Shopify guidelines.

Key capabilities

• Access to Shopify's CSS guidelines documentation.
• CSS validation against Shopify standards.
• Generation of CSS snippets based on guidelines.
• Refactoring of existing CSS code.

Example prompts

• "Generate a button style according to Shopify’s CSS guidelines."
• "Validate this CSS snippet against the Shopify CSS guide: [paste CSS here]"
• "Refactor this CSS to be compliant with Shopify's standards: [paste CSS here]"

Tips & gotchas

The skill requires familiarity with basic CSS concepts. While it automates much of the process, understanding the underlying principles will help you interpret and refine the results effectively.