Orange-Boosted-Bootstrap

OUDS Web project knowledge base: glossary of 154 terms, build pipeline, npm scripts, CI/CD jobs, and file structure. Use this skill when encountering unfamiliar project terminology (DTCG, rtlcss, Pa11y, etc.), when you need to know which npm command to run, what CI jobs check, where files live, or general project context. For the detailed file map, read references/project-map.md.

OUDS design token system rules and architecture. Use this skill when working with tokens, adding new component tokens, debugging undefined token errors, working on dark mode, editing _variables.scss, or touching any file in packages/*/scss/tokens/. Covers the 3-tier hierarchy (raw→semantic→component), CSS custom property bridge for dark mode, auto-generated file protections, import order, and the color-mode mixin. For deep architecture details, read references/architecture.md.

WCAG 2.2 accessibility rules for OUDS Web. Use this skill when creating or editing interactive components, writing HTML templates, adding ARIA attributes, handling focus states, or reviewing accessibility. Covers WCAG 2.2 Level AAA target (AA fallback), ARIA patterns for every component type, focus-visible mixin, color contrast (7:1 AAA / 4.5:1 AA), 44×44px touch targets, reduced motion, RTL, focus trapping, and cognitive accessibility. Always invoke this skill for any work touching user interaction or markup structure.

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.

SCSS and JS structural patterns for OUDS Web components. Use this skill when creating, editing, or reviewing component SCSS files (scss/_*.scss, scss/forms/_*.scss) or JS component files (js/src/*.js). Covers CSS custom property declarations at top of class, state overrides via variable overrides (not property overrides), scss-docs-start/end markers, border-width compensation with calc(), mask-image icon pattern, responsive breakpoint overrides, and the OUDS mod comment convention.

Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web. Use this skill when scaffolding a new UI component, form component, or interactive element from scratch. Covers SCSS file structure, brand entry point imports, token setup across 3 brands, ARIA requirements, JS BaseComponent boilerplate, unit tests, documentation page, and the full build/verify/checklist process.

Diagnostic workflow for build, lint, CI, and test errors in OUDS Web. Use this skill when encountering any error — Stylelint violations (border-radius, border:none, !default), ESLint failures (semicolons, console), Sass build errors (undefined variables, missing imports), CI job failures, JS test failures, or Pa11y accessibility violations. Provides a decision tree to identify the error category and step-by-step fix instructions.

JavaScript coding conventions for OUDS Web. Use this skill when writing, editing, or reviewing any JS file in js/src/ or js/tests/. Covers no-semicolons style, no trailing commas, template literals, .js import extensions, no console.* in production, strict mode, and the BaseComponent pattern. All JS is shared across brands — never put JS in packages/<brand>/.

Multi-brand architecture for OUDS Web (Orange, Sosh, Orange Compact). Use this skill when working on files in packages/, when adding new tokens that need cross-brand sync, when you need to understand what is shared vs brand-specific, or when testing changes across brands. Covers the 3-brand structure, brand entry point import order, what to update in all brands, and how to test cross-brand.

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.

Read-only audit of OUDS design token usage across SCSS component files. Use this skill when the user asks to validate, check, or audit tokens, when reviewing PRs that touch scss/_*.scss or packages/, or before a release. Performs cross-brand presence check (are tokens defined in all 3 brands?) and anti-pattern detection (hardcoded values, raw tokens, forbidden patterns). Generates a structured report — does not modify files.