conventions-css

What problem does it solve?

This Skill prevents inconsistent CSS practices, reliance on utility frameworks, and hardcoded values, which often lead to unmaintainable, bloated, and visually inconsistent user interfaces. It standardizes your styling approach.

Core Features & Use Cases

• Enforced Custom CSS: Mandates custom CSS only, prohibiting utility frameworks like Tailwind or CSS-in-JS for a cleaner codebase.
• Strict Scoping Rules: Defines clear guidelines for <style scoped> versus unscoped styles to manage component isolation and design token inheritance.
• Design Token Integration: Promotes exclusive use of CSS custom properties for all design tokens (colors, spacing, typography), ensuring a consistent design system.
• Use Case: When developing new UI components or refactoring existing styles, this skill ensures all CSS adheres to the project's design system, promoting consistency and maintainability across the entire application.

Quick Start

Write CSS for a new button component, ensuring it follows the project's design tokens and scoping rules.