design-scss

What problem does it solve?

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.

Core Features & Use Cases

• SCSS design tokens: Standardized spacing, border radii, shadows, transitions, and breakpoints from variables.scss to prevent magic numbers.
• Reusable mixins (11 total): Layout helpers and typography/behavior utilities like flex-center/flex-between, truncate, multiline-truncate, absolute-center, transition, hover-lift, button-reset, visually-hidden, and respond-to.
• Vite auto-injection barrel: Ensures variables and mixins are available in every component SCSS without explicit @use statements.
• Component-scoped SCSS conventions: File naming, external SCSS loading via Vue SFC src, and safe mobile-first responsive patterns.
• Animations/utilities as inert catalogs: Documents _animations.scss and _utilities.scss patterns, while clearly stating they are not bundled by default, so you don’t accidentally rely on non-rendering classes.

Quick Start

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').