---
name: 'code-review'
description: 'OUDS Web compliance code review. Use this skill when reviewing a diff, preparing a commit, or when asked to check code quality. Acts as a safety net that verifies all OUDS conventions are respected: token usage (no hardcoded values, no raw tokens), required mixins (border-radius, transition), accessibility (ARIA, focus-visible), multi-brand sync (tokens in all 3 brands), and file hygiene (no dist/, no auto-gen edits). Invoke proactively before any commit or PR submission.'
---

# 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
```