orange-opensource/orange-boosted-bootstrap/code-review

Code Review (OUDS Compliance)

Purpose

This skill is a safety net. It catches OUDS convention violations that other skills might have missed. Invoke it before committing or when reviewing diffs.

Checklist

For each changed file in the diff, verify:

SCSS files (**/*.scss)

• [ ] No hardcoded values — colors (#xxx), spacing (16px), dimensions must use tokens
• [ ] No raw tokens — $core-ouds-*, $core-orange-*, $core-sosh-* never in component SCSS
• [ ] Mixins used — @include border-radius() and @include transition() (never direct properties)
• [ ] `border: 0` — not border: none
• [ ] No `lighten()`/`darken()` — use token variant
• [ ] `!default` on variables — every module-scope SCSS variable
• [ ] Colors via CSS custom props — var(--#{$prefix}color-*) for dark mode
• [ ] `color-mode()` mixin — not raw [data-bs-theme] or prefers-color-scheme
• [ ] `#{$ouds-root-selector}` — not :root directly
• [ ] `// OUDS mod:` comment on Bootstrap deviations

JavaScript files (js/src/**/*.js)

• [ ] No semicolons
• [ ] No trailing commas
• [ ] Template literals (not concatenation)
• [ ] `.js` extension on imports
• [ ] No `console.*` in js/src/
• [ ] `'use strict'` at top
• [ ] Extends `BaseComponent` (if it's a component)

HTML/MDX files

• [ ] Semantic elements — <button> for actions, <a> for links
• [ ] ARIA attributes — correct for the interaction pattern
• [ ] `.visually-hidden` — not display: none for SR content
• [ ] `data-bs-theme` — not prefers-color-scheme for color modes

Token/brand files (packages/**)

• [ ] Auto-generated files not modified — _raw.scss, _semantic.scss, _component.scss, _*-custom-props.scss
• [ ] New tokens in all 3 brands — if a new $ouds-<comp>-* was added
• [ ] Import order preserved — in _index.scss

General

• [ ] No `dist/` files in the diff
• [ ] No JS in `packages/<brand>/` — JS is shared
• [ ] Focus visible — @include focus-visible() on interactive elements
• [ ] Touch targets — 44×44px minimum on new interactive elements

How to use

1. Run git diff --stat to see changed files
2. For each file category, apply the relevant checklist section
3. Report violations with file, line, and suggested fix
4. Classify: ERROR (must fix) vs WARNING (should fix)

Report format

## Code Review: OUDS Compliance
 
### ❌ Errors (must fix before merge)
- `scss/_buttons.scss:42` — hardcoded `padding: 8px` → use `$ouds-space-*` token
- `js/src/tooltip.js:15` — semicolon present → remove
 
### ⚠️ Warnings (should fix)
- `scss/_card.scss:88` — missing `// OUDS mod:` on Bootstrap override
 
### ✅ Passed
- Token cross-brand check: all present
- No dist/ files in diff
- ARIA attributes correct