orange-opensource/orange-boosted-bootstrap/scss-conventions

Claude Code and agent skill by orange-opensource/orange-boosted-bootstrap

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

SCSS coding conventions for OUDS Web. Use this skill whenever writing, editing, or reviewing SCSS files. Covers variable naming ($component-state-property-size formula), required !default flag, mandatory mixins (border-radius, transition), forbidden patterns (hardcoded values, raw tokens, lighten/darken, border:none), color-mode mixin usage, and OUDS mod markers. Invoke this skill for any SCSS work — even small edits can violate token or mixin rules.

Install

npx vskill@latest install orange-opensource/orange-boosted-bootstrap/scss-conventions

SKILL.md

SCSS Conventions

Why these rules exist

OUDS Web uses token-driven multi-brand theming. Strict SCSS conventions ensure that token variables resolve correctly across 3 brands, dark mode works via CSS custom properties, RTL is handled by rtlcss, and Stylelint catches violations in CI.

Variable naming

Formula: $component-state-property-size

scss
$nav-link-disabled-color
$modal-content-box-shadow-xs
$btn-padding-y

Every module-scope variable requires !default (allows consumer overrides). Local variables in mixins/functions are exempt.

Token usage

Always use semantic or component tokens. Never use raw tokens or hardcoded values.

scss
// ✓ semantic token
padding: $ouds-space-padding-block-medium;
 
// ✓ component token (preferred when exists)
@include border-radius($ouds-button-border-radius-default);
 
// ✓ CSS custom property for colors (dark mode)
color: var(--#{$prefix}color-content-default);
 
// ✗ raw token
padding: $core-ouds-dimension-200;
 
// ✗ hardcoded
padding: 16px;

Required mixins

Instead ofUseWhy
border-radius: X@include border-radius($val)Stylelint-enforced; consistent logical directions
transition: X@include transition(X)Auto-injects prefers-reduced-motion
border-top-left-radius@include border-top-start-radius($val)Logical (RTL-compatible)

Forbidden patterns

PatternFix
border: noneborder: 0
lighten() / darken()Use lighter/darker token variant
$core-ouds-* in componentsUse $ouds-* semantic token
$core-orange-* / $core-sosh-*Use semantic/component token
:root { }#{$ouds-root-selector} { }
@media (prefers-color-scheme)@include color-mode(dark)
[data-bs-theme="light"] raw@include color-mode(light, true)

Color mode declarations

scss
@include color-mode(light, true) {
  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-light};
}
@include color-mode(dark) {
  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-dark};
}

Bootstrap override markers

scss
display: flex; // OUDS mod: instead of `inline-block`
 
// OUDS mod: loading buttons
.btn.loading-indeterminate { ... }
// End mod

File formatting

UTF-8, LF, 2-space indent, final newline, no trailing whitespace.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
219
Repository forks
61
7-day trend score
27

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/orange-opensource/orange-boosted-bootstrap/scss-conventions/badge)](https://verified-skill.com/skills/orange-opensource/orange-boosted-bootstrap/scss-conventions)

Something wrong with this skill or its page? Tell us.