Enforce CSS conventions with custom properties, scoping, and design tokens.
npx skills add https://github.com/caiokf/homepage --skill conventions-css
Please help me install this Agent Skill. Skill: conventions-css Source: https://github.com/caiokf/homepage/tree/main/.claude/skills/conventions-css Command: npx skills add https://github.com/caiokf/homepage --skill conventions-css
This Skill prevents inconsistent CSS practices, reliance on utility frameworks, and hardcoded values, which often lead to unmaintainable, bloated, and visually inconsistent user interfaces. It standardizes your styling approach.
<style scoped> versus unscoped styles to manage component isolation and design token inheritance.Write CSS for a new button component, ensuring it follows the project's design tokens and scoping rules.
High-intent search queries and answers about installing and using this skill.
Enforce consistent CSS styling by mandating custom CSS properties exclusively, establishing scoping rules for component isolation, and defining design tokens for colors, spacing, and typography. This prevents utility framework reliance and hardcoded values that lead to unmaintainable interfaces.
Scoped CSS isolates styles to individual components using `<style scoped>`, while unscoped styles apply globally and serve design tokens and atoms. Clear scoping rules prevent style conflicts and ensure design token inheritance across your project.
No. This approach mandates custom CSS only, prohibiting utility frameworks like Tailwind and CSS-in-JS solutions. Custom CSS with design tokens ensures cleaner code, explicit naming conventions, and full control over your design system.
Use runtime-value inline styling exclusively for dynamic values that cannot be expressed as static CSS custom properties. This maintains consistency while allowing necessary flexibility for computed or user-driven styling within your design system constraints.
CSS custom properties centralize design decisions, making your design system maintainable and visually consistent. They eliminate hardcoded values that scatter styling logic, reduce refactoring burden, and ensure all components reference explicit design tokens.
Yes. Native CSS nesting support integrates with design token conventions by allowing nested selectors to reference CSS custom properties, improving code organization while maintaining strict naming and scoping discipline across your design system.
vidzzaProvide foundational CSS design tokens as custom properties for web projects.
leonardoteodorooDefine design system tokens, theming, and component architecture patterns.
launchapp-devDefine naming conventions for design components, tokens, and assets.
gokul12072006Build React-based user interfaces with shadcn/ui and Tailwind CSS.