umbrella-scss-configure-global-styles
Bootstrap or align global Sass entries, framework overrides, PostCSS, asset URLs and CSS ordering without changing branding or scoped-style ownership.
SKILL.md.ai-shared/skills/umbrella-scss-configure-global-styles/SKILL.md
GitHubConfigure Global SCSS
Contract and operating modes
Read .ai-shared/bundles/umbrella/frontend/contract.md and the optional repository umbrella-frontend.json. Apply only this skill's scope. Analyze reports without changing application files; Apply implements requested setup/repairs; Verify checks the result. An explicit setup/fix request authorizes Apply after inspecting existing changes; do not add a second approval step. Upgrades and source migrations are separate unless requested.
Report selected projects/profile, findings and exceptions, changed files, actual checks and unresolved validation. Missing tools/credentials mean incomplete verification, not success. Use the report vocabulary from the contract.
Workflow
- Trace global SCSS from entry through output to the page. Inventory Bootstrap, Font Awesome, fonts, resets, helpers and overrides. Preserve brand values, accessibility fonts, weights, icon styles and licensed dependencies.
- Make configuration/import order explicit: framework variables before framework emission and application overrides after the rules they replace. Avoid framework emission through multiple entries. Keep token/mixin helpers separate from CSS-emitting modules.
- Align Sass implementation/load paths with scoped compilation. Prefer package/load-path resolution over brittle node_modules traversal after verifying imports. Routine alignment preserves working legacy imports; module conversion is a separate migration.
- Apply the agreed browser policy through PostCSS/Autoprefixer, dev maps and release minification. Preserve cascade order across vendor, site and isolation bundles. Understand URL rebasing before relocating stylesheets.
- Resolve fonts/images against the deployed public path. Distinguish app static files from bundler outputs. Never import isolated .razor.scss/.cshtml.scss globally to conceal a broken scoped pipeline.
Verify
Build both modes and inspect framework overrides, font preferences, icons and URLs on nested routes. Compare rendered pages if order changes. Classify Sass deprecations by application/dependency; suppression is not remediation. Use the Bootstrap skill when changing its theme contract.
.NET analyzer compatibility
If the requested work includes C# or Razor changes, read .ai-shared\bundles\umbrella\analyzer-compatibility.md and verify affected projects with their installed analyzers. For read-only audits, use it only as review guidance. Pure NPM/JavaScript/SCSS edits do not require unrelated .NET source changes.