skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

astro-scss-best-practices

Enforce component-scoped SCSS Modules and namespaced token imports in Astro projects.

1|Updated Apr 29, 2026
Search Tags:#astro#scss#design-tokens#css-modules#component-styling#frontend-best-practices#namespaced-imports
One-click install
npx skills add https://github.com/firstsun-dev/yao-agent-skills --skill astro-scss-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-scss-best-practices
Source: https://github.com/firstsun-dev/yao-agent-skills/tree/main/custom/develop/astro-scss-best-practices
Command: npx skills add https://github.com/firstsun-dev/yao-agent-skills --skill astro-scss-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide enforces scalable, maintainable styling in Astro projects by mandating component-scoped SCSS modules, namespaced imports, and design-token usage, reducing CSS collisions and confusion.

Core Features & Use Cases

  • Use SCSS Modules for all components and co-locate ComponentName.module.scss alongside each component.
  • Enforce namespaced imports with @use to import tokens and mixins, preventing namespace pollution.
  • Promote design tokens via CSS variables (var(--...)) for colors, spacing, and typography to ensure consistency.
  • Encourage component isolation by extracting repeated patterns into reusable components and limiting global styles.

Quick Start

Apply these practices when creating or refactoring Astro components by replacing global styles with component-scoped SCSS modules and using namespaced tokens.

Frequently Asked Questions about astro-scss-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scope SCSS styles to individual components in Astro?▼

Scope SCSS styles in Astro by co-locating a ComponentName.module.scss file alongside each component and applying CSS Modules. This enforces component isolation and prevents CSS collisions.

What is the best way to manage design tokens in Astro SCSS?▼

Manage design tokens in Astro SCSS by defining colors, spacing, and typography as CSS variables. Use var(--...) within your stylesheets to ensure visual consistency across your application.

Why should I use namespaced imports for SCSS mixins in Astro?▼

Use namespaced imports with @use for SCSS mixins in Astro to prevent namespace pollution. This approach keeps global styles clean and maintains maintainable component-level styling workflows.

Does Astro support CSS Modules for UI library development?▼

Astro supports CSS Modules for UI library development by mandating component-scoped SCSS modules. This limits global styles and encourages extracting repeated patterns into reusable, isolated components.

How do I refactor global styles into component-scoped SCSS in Astro?▼

Refactor global styles into component-scoped SCSS in Astro by replacing global stylesheets with co-located SCSS modules and applying namespaced token imports. This reduces CSS confusion and collisions.

Related Skills

Explore More Software Engineering Skills→
michaelvolzmichaelvolz

rm-ui-styling

Enforce Foundation SCSS conventions and WCAG 2.1 AA accessibility in Blazor UI styling.

Community
Basic
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
estebandrgestebandrg

tailwind-4

Standardize Tailwind CSS usage in React/Next.js projects with className and cn() guidelines.

Community
Basic
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate