home / skills / oro-ad / nuxt-claude-devtools / css-architecture

css-architecture skill

safe

/playground/.claude/skills/css-architecture

This skill helps you apply modern CSS architecture patterns, enabling consistent theming, scalable layouts, and accessible, maintainable styles.

npx playbooks add skill oro-ad/nuxt-claude-devtools --skill css-architecture

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.8 KB

---
name: css-architecture
description: CSS and styling best practices. Use when working with styles, layouts, or theming.
---

Follow modern CSS architecture patterns:

## CSS Variables

Use CSS custom properties for theming:

```css
:root {
  /* Colors */
  --color-primary: #10a37f;
  --color-primary-dark: #0d8a6a;
  --color-bg: #0f0f0f;
  --color-bg-elevated: #1a1a1a;
  --color-text: #ffffff;
  --color-text-muted: #a0a0a0;
  --color-border: #333333;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
}
```

## Scoped Styles

Always use `<style scoped>` in Vue components:

```vue
<style scoped>
.card {
  background: var(--color-bg-elevated);
  border-radius: var(--radius);
}
</style>
```

## Flexbox & Grid

Prefer modern layout methods:

```css
/* Flexbox for 1D layouts */
.row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

/* Grid for 2D layouts */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}
```

## Mobile-First

Start with mobile styles, add breakpoints for larger screens:

```css
.container {
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
  }
}
```

## Transitions

Use consistent transitions:

```css
.button {
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}
```

## Dark Mode

This project uses dark mode by default. For light mode support:

```css
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-text: #1f2937;
  }
}
```

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

Should I always use CSS variables for every value?

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.