conventions-css
Apply when writing styles. Ensures consistency with design system and project patterns.
When & Why to Use This Skill
This Claude skill enforces strict CSS conventions and architectural patterns to ensure high-quality, maintainable, and consistent styling across web projects. It streamlines front-end development by prioritizing custom CSS over utility frameworks, mandating the use of design tokens via CSS custom properties, and implementing rigorous scoping rules. By adhering to these professional standards, the skill helps developers maintain a robust design system, leverage modern CSS features like native nesting, and prevent style leakage in complex applications.
Use Cases
- Developing New UI Components: Automatically generate CSS that adheres to project-specific design tokens and scoping rules, ensuring every new element is perfectly aligned with the existing design system.
- Refactoring Legacy Stylesheets: Efficiently convert hardcoded colors, spacing, and typography into a semantic color system and CSS custom properties for improved themeability and long-term maintenance.
- Enforcing Architectural Standards: Maintain project integrity by preventing the introduction of utility frameworks or CSS-in-JS in codebases dedicated to pure, scoped CSS architectures.
- Implementing Design Systems: Translate design specifications into functional CSS using a standardized naming convention for semantic and contextual colors, ensuring visual consistency across the entire platform.
| name | conventions-css |
|---|---|
| description | Apply when writing styles. Ensures consistency with design system and project patterns. |
CSS Conventions
No Utility Frameworks
No Tailwind, no utility classes, no CSS-in-JS. Custom CSS only.
Scoping Rules
- Atoms: Unscoped
<style>— allows design token inheritance - Everything else:
<style scoped>
Design Tokens
CSS custom properties exclusively. Never hardcode colors, spacing, typography.
.base-input {
padding: var(--input-padding);
border-color: var(--input-border-color);
font-family: var(--input-font-family);
}
Color System
- Semantic:
--color-primary-{100-400},--color-error-{100-400} - Named:
--color-blue-{100-400},--color-amber-{100-400} - Contextual:
--text-primary,--input-focus-border
Native CSS Nesting
.base-input {
&:focus {
border-color: var(--input-focus-border);
}
&:disabled {
opacity: var(--input-disabled-opacity);
}
}
Inline Styles
Only for truly dynamic values (calculated at runtime). Otherwise use CSS custom properties.