Frontend CSS Standards

What problem does it solve?

This Skill combats the issues of inconsistent, unmaintainable CSS that lead to style conflicts, bloated stylesheets, and slow development. It promotes a structured approach to styling, ensuring consistency, scalability, and easier collaboration.

Core Features & Use Cases

• Methodology Adherence: Enforces consistent use of the project's chosen CSS methodology (e.g., Tailwind, BEM, CSS Modules, CSS-in-JS) to avoid mixing paradigms and ensure predictability.
• Design System Integration: Mandates using predefined design tokens (colors, spacing, typography, shadows) instead of hardcoded values, ensuring visual consistency and easy theme changes.
• Framework-First Approach: Guides on leveraging framework utilities and patterns (e.g., Tailwind classes, component library APIs) and minimizing custom CSS to avoid unnecessary overrides and maintain efficiency.
• Use Case: When styling a new Card component, use this skill to ensure it uses Tailwind utility classes (e.g., p-6, bg-white, rounded-lg), adheres to the project's color palette via design tokens, and avoids custom CSS where utilities suffice.

Quick Start

Apply the Frontend CSS Standards skill to style the 'ProductButton' component, ensuring it uses Tailwind utility classes for padding, background color, and border-radius, and adheres to the project's primary color token.