Atomic CSS

What problem does it solve?

This Skill streamlines frontend styling by enabling the creation and application of atomic CSS utility classes, ensuring consistent and maintainable design across the DWP Hours Tracker application.

Core Features & Use Cases

• Atomic CSS Generation: Create single-purpose CSS classes for styling elements.
• Token-Based Styling: Utilizes CSS custom properties defined in tokens.css for colors, spacing, etc.
• Tailwind-like Conventions: Adheres to familiar naming conventions for ease of use.
• Use Case: Apply a background color to a button using a predefined token and add padding around it with utility classes.

Quick Start

Create a new background color utility for the surface color using the provided tokens.