Css Design Tdd

What it does

This skill, "Css Design Tdd," assists in building CSS design systems using Test-Driven Development (TDD) principles. It provides a suite of checks to identify potential issues within your CSS code, helping you write more robust and maintainable styles. The process involves identifying problems ("RED"), fixing them ("GREEN"), and then refactoring for clarity and regression prevention.

When to use it

• When developing or maintaining a design system for a frontend project.
• To ensure consistency in styling across different components and containers.
• To proactively identify potential CSS errors before they impact the user experience.
• During code reviews to enforce CSS best practices.
• To catch hardcoded values that should be defined as tokens.

Key capabilities

• Undefined Variable Check: Identifies CSS variables used without a definition.
• Missing Fallback Check: Finds var() usages lacking fallback values, particularly within container blocks.
• Hardcoded Color Check: Detects hex and rgba color values that should be defined as tokens.
• Container Consistency Check: Verifies consistent styling (margins, padding, list multipliers) across various containers.
• Focus Indicator Check: Identifies interactive elements lacking focus styles.

Example prompts

While this skill doesn't directly respond to natural language prompts, it provides scripts that can be executed via a terminal or integrated into an automated workflow. Examples of using the provided checks include: "Run the undefined variable check" or "Execute the container consistency check for margins."

Tips & gotchas

• This skill requires familiarity with command-line tools and CSS syntax.
• The scripts are designed to be run within a project directory containing CSS files (e.g., src/**/*.css).
• The checks rely on pattern matching, so false positives may occasionally occur. Review the results carefully.