Standardize SCSS design tokens and reusable mixins for Vue SFC component styles.
npx skills add https://github.com/e-xode/vue-ssr --skill design-scss
Please help me install this Agent Skill. Skill: design-scss Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/design-scss Command: npx skills add https://github.com/e-xode/vue-ssr --skill design-scss
It solves inconsistent styling and slow design iteration by providing a single SCSS design system—tokens and mixins—so every component uses the same spacing, radii, shadows, transitions, and responsive rules.
Use the design-scss skill to set up src/views/Profile/ProfileView.scss with token-based spacing and responsive layout by writing SCSS that uses @include flex-col and @include respond-to('md').
High-intent search queries and answers about installing and using this skill.
Standardize SCSS design tokens by defining spacing, radii, shadows, and breakpoints in variables.scss, then use a Vite auto-injection barrel to make them available in every Vue 3 component SCSS without explicit @use statements, ensuring consistent styling.
Apply responsive styling and hover effects in Vue SFC component styles by using reusable mixins like respond-to for mobile-first breakpoints, hover-lift for interactions, and transition for smooth state changes, all driven by standardized SCSS design tokens.
You need a Vite auto-injection barrel to automatically expose SCSS design tokens and mixins in every component SCSS file, eliminating the need for repetitive explicit @use statements and preventing hardcoded values across your Vue SSR starter kit.
The limitation is that SCSS animations and utilities catalogs are treated as inert patterns and are not bundled by default, meaning you must explicitly wire them into your component SCSS to avoid accidentally relying on non-rendering classes.
No, you cannot use hardcoded values or SCSS code comments; the approach forbids magic numbers and requires using standardized design tokens and reusable mixins to enforce consistent spacing, typography truncation, and accessible hiding across the Vue SSR starter kit.
e-xodeCoordinate design delegation and task splitting for Vue SSR Starter Kit.
legoutStyle Slidev presentations with UnoCSS utilities and custom CSS overrides.
tiantangcao1980-webIntegrate NutUI Vue 3 components into mobile H5 and Taro MiniProgram projects.
GenuinehConfigure Twind and Tailwind CSS design systems for reusable component styling.
