| name | scss |
| description | review, design, scaffold, refactor, and troubleshoot scss and sass based styling systems. use when the user asks for scss architecture, variables and tokens, mixins, nesting, partials, modules, theming, build integration, or migration guidance.
|
SCSS
Use this skill to keep SCSS work grounded in maintainable architecture, predictable delivery, and framework-appropriate conventions.
Intent Router
| Need | Load |
|---|
| core conventions, structure, review priorities, and common red flags for SCSS | references/best-practices.md |
| setup, migration, testing, build, delivery, and day-two workflow guidance for SCSS | references/workflows.md |
Quick Start
- Confirm Sass compiler and module system, global styles, CSS modules, or scoped-style consumption model, design-token source, and runtime theming requirements.
- Identify whether the task is greenfield scaffolding, incremental refactoring, troubleshooting, migration planning, or code review.
- Apply the defaults in
references/best-practices.md before proposing custom architecture.
- Prefer the smallest change set that improves clarity, safety, operability, and long-term maintainability.
Workflow
- start from token sources and entry-point stylesheets
- flatten the highest-risk selectors first
- keep compile-time and runtime theming responsibilities distinct
- inspect compiled CSS and screenshots after structural changes
Typical Focus Areas
- Sass compiler and module system
- global styles, CSS modules, or scoped-style consumption model
- design-token source
- runtime theming requirements
Outputs to Prefer
- summarize compiler, consumption model, and token posture first
- group findings by modules, tokens, nesting, theming, and build integration
- recommend architecture cleanup before cosmetic churn
First Response Pattern
- restate the Sass module system, stylesheet consumption model, and runtime theming requirements before suggesting changes
- anchor the plan at token sources, entry-point stylesheets, and the narrowest selector boundary
- name the verification loop up front: Sass compile or host build, compiled CSS inspection, and a screenshot check of the affected page or component
Common Requests
Review this SCSS structure for module boundaries, nesting discipline, token usage, and override risk.
Help refactor a legacy Sass codebase into a more maintainable token and partial architecture.
Safety Notes
- preserve externally visible behavior unless the user explicitly requests a redesign or a breaking change
- avoid style-only churn when the current repository already has working conventions and automation
