component-styles

What problem does it solve?

This Skill provides a standardized way to add and manage styling APIs (styles, classNames, and static classNames) for CDS components, ensuring consistency and maintainability across the design system.

Core Features & Use Cases

• Define Styleable Elements: Identifies and documents elements within a component that can be targeted for styling.
• Generate Style Props: Automatically creates styles and classNames props for components.
• Enforce Naming Conventions: Ensures consistent naming for selectors and class names (e.g., cds-ComponentName-selectorName).
• Add Static ClassNames: Implements a pattern for static class names in web components for CSS targeting.
• Mobile Styling Pattern: Provides a simpler pattern for styling mobile components.
• JSDoc Documentation: Enforces clear JSDoc comments for selectors and their usage.
• Testing: Includes guidelines for adding tests to verify static class name application.
• Documentation Updates: Guides users on updating component documentation after implementing the styles API.

Quick Start

Use the component-styles skill to add the styles API to the Button component, ensuring all approved selectors are documented with JSDoc and static class names are implemented following the cds-ComponentName-selectorName convention.