theme

sayali-ingle-pdl's avatarfrom sayali-ingle-pdl

Generates SCSS theme files in src/theme/ including vars.scss, shadow.scss, and index.scss with sample variables and mixins for styling.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the creation of a professional-grade SCSS design system by generating a structured theme directory. It produces essential files including global variables, Material Design-inspired shadow mixins, and a barrel export file, all strictly adhering to modern Sass module system standards (@use and @forward) to ensure scalable, maintainable, and warning-free frontend styling.

Use Cases

  • Project Initialization: Rapidly scaffold a standardized SCSS theme structure for new web applications to ensure design consistency and architectural best practices from day one.
  • Modernizing Stylesheets: Refactor legacy CSS/SCSS architectures to adopt the latest Sass module patterns, eliminating deprecation warnings and improving code modularity.
  • Design System Implementation: Automatically generate comprehensive design tokens, such as global color variables and complex shadow mixins, for seamless integration across Vue, React, or Angular components.
nametheme
descriptionGenerates SCSS theme files in src/theme/ including vars.scss, shadow.scss, and index.scss with sample variables and mixins for styling.

Theme Skill

Purpose

  • Generate SCSS theme files with variables and mixins.
  • Add few sample SCSS variables as example in variables file.
  • Add a few sample mixins as example in mixins file.
  • Create an index.scss file that will forward the variables file. For example:
    @forward './vars';

Output

Create the files:

  • src/theme/vars.scss
  • src/theme/shadow.scss
  • src/theme/index.scss

⚠️ CRITICAL: Use Modern Sass Module System

MUST follow current Sass best practices as documented in official Sass documentation

Example of Implementation Pattern

In src/theme/index.scss - Use @forward to re-export variables:

@forward './vars';
@forward './shadow';

In components (App.vue, etc.) - Use @use to import theme:

<style lang="scss">
@use '@/theme/' as *;

.my-component {
  color: $primary-color; // Variables from theme are now available
}
</style>

Verification

After generating theme files:

  • Run build and check console output for any deprecation warnings
  • If deprecation warnings appear, consult official Sass documentation for current patterns
  • Ensure the implementation follows the @forward/@use pattern shown in examples

Notes

  • vars.scss provides comprehensive design system variables
  • shadow.scss provides Material Design-inspired shadow mixins (0dp to 24dp)
  • Forward/use pattern enables clean imports in components
  • Use with @use '@/theme/' as *; in components
  • Shadow mixins reference $global-black from vars.scss
  • The index.scss file acts as a barrel export using @forward