oro-ad/nuxt-claude-devtools
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
FAQ
Use variables for values that repeat or represent design tokens (colors, spacing, radii). For one-off values inside a single component, inline values are fine.
When should I choose Grid over Flexbox?
Use Flexbox for linear, single-axis layouts (rows or columns). Use Grid when you need two-dimensional control over columns and rows or responsive item placement.
2 skills
This skill helps you apply modern CSS architecture patterns, enabling consistent theming, scalable layouts, and accessible, maintainable styles.
This skill helps you implement Vue 3 Composition API patterns in components using script setup, refs, reactive, and computed for robust state management.
