scss-style-guide

What problem does it solve?

This Skill ensures consistent SCSS coding standards for the fundamental-styles project, reducing errors and improving maintainability.

Core Features & Use Cases

• SCSS Coding Standards: Enforces BEM naming conventions, file structure, and best practices.
• Architecture & Methodology: Provides guidelines for BEM pattern usage and self-contained components.
• File Structure & Imports: Standardizes file headers, imports, and variable declarations.
• Reset Mixin Rules: Ensures proper usage of the fd-reset() mixin for consistent resets.
• CSS Custom Properties: Offers best practices for using CSS variables for theming and customization.
• Loops for Repetitive Properties: Demonstrates how to use loops for generating variations like colors and sizes.
• Nesting Depth & Selectors: Defines maximum nesting levels and best practices for selectors.
• Units & Values: Provides guidelines for using theming variables, rem units, and logical properties.
• RTL-Aware Spacing and Borders: Ensures proper handling of right-to-left text direction.
• State & Pseudo-Class Mixins: Offers mixins for interactive states like hover, focus, and disabled.
• Responsive & Compact Modes: Provides responsive design guidelines and compact mode adjustments.
• Common Mixins & Utilities: Lists common mixins for flexbox, positioning, text utilities, borders, sizing, and resets.
• Pseudo-Elements for Visual Effects: Explains how to use pseudo-elements for extended touch areas, custom focus indicators, and badge positioning.
• Code Organization Within File: Suggests an order for organizing code within a SCSS file.
• Anti-Patterns to AVOID: Lists common coding anti-patterns to avoid.
• Accessibility Patterns: Provides guidelines for implementing accessibility features.
• Quick Checklist for Code Review: Offers a checklist for reviewing SCSS code.
• Common Theming Variables Reference: Lists common theming variables used in the project.

Quick Start

Use the scss-style-guide skill to review your SCSS code and ensure it adheres to the fundamental-styles coding standards.