ReddRadar
Agent skill
conventions-css
Apply when writing styles. Ensures consistency with design system and project patterns.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/conventions-css
SKILL.md
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.
css
.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
css
.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.
Didn't find tool you were looking for?