css-architecture_skill

Overview

This skill provides concise, opinionated guidance on CSS architecture and styling best practices for Vue projects. It focuses on maintainable theming, modern layout techniques, scoped component styles, mobile-first responsiveness, and consistent transitions. Use it to standardize styling across Nuxt/Vue apps and to accelerate UX-consistent development.

How this skill works

The skill inspects common styling needs and recommends patterns: CSS custom properties for theming, scoped <style> blocks in Vue components, and modern layout primitives like Flexbox and Grid. It enforces a mobile-first approach, consistent transition rules, and a dark-mode-first palette with optional light-mode overrides. Examples and small snippets demonstrate how to apply the patterns in components and global styles.

When to use it

• When setting up a new Nuxt or Vue project styling system
• When standardizing theming across components and pages
• When converting legacy CSS to modern, maintainable patterns
• When implementing responsive layouts and breakpoint rules
• When adding dark-mode support or light-mode overrides

Best practices

• Define a small set of CSS variables in :root for colors, spacing, and radii
• Use <style scoped> in Vue components to limit style leakage and keep components portable
• Prefer Flexbox for one-dimensional layouts and CSS Grid for two-dimensional layouts
• Develop mobile-first: write base styles for small screens, add min-width breakpoints for larger ones
• Keep transitions subtle and consistent (e.g., transition: all 0.2s ease) to improve perceived responsiveness
• Default to dark mode and use prefers-color-scheme media query to provide light-mode overrides

Example use cases

• Create a theme system with CSS custom properties to allow runtime color adjustments
• Build a responsive card grid using grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
• Scope styles per component to avoid global collisions when integrating third-party UI
• Implement a button component with a standardized hover lift using transform and transition
• Add light-mode support by overriding root variables inside a prefers-color-scheme: light block