switch to skill for token efficiency

Author: vprothais

.github/copilot-instructions.md

@@ -2,9 +2,9 @@
 applyTo: "**"
 ---
 
-# OUDS Web — Project Context
+# OUDS Web
 
-**OUDS Web** (Orange Unified Design System — Web) is a multi-brand design system built as a fork of Bootstrap 5.3.6. It serves 3 brands (Orange, Sosh, Orange Compact) from a single codebase where only CSS tokens differ per brand — JavaScript is fully shared.
+**OUDS Web** (Orange Unified Design System — Web) is a multi-brand design system built as a fork of Bootstrap 5.3.6. It serves 3 brands (Orange, Sosh, Orange Compact) from a single codebase — only CSS tokens differ per brand, JavaScript is fully shared.
 
 ## Quick Reference
 
@@ -18,41 +18,18 @@ applyTo: "**"
 | Tests | `npm run test` |
 | Dev servers | `:9001` (orange) · `:9002` (sosh) · `:9003` (orange-compact) |
 
-## Critical Constraints
-
-These rules are non-negotiable and apply to every contribution:
-
-1. **Use tokens, not hardcoded values** — colors, spacing, dimensions all come from the OUDS token system.
-2. **Use mixins for `border-radius` and `transition`** — direct CSS properties are forbidden by Stylelint.
-3. **Auto-generated token files are read-only** — never edit `_raw.scss`, `_semantic.scss`, `_component.scss`, or `_*-custom-props.scss`. Only `_composite.scss` is hand-editable.
-4. **Never commit `dist/`** — build artifacts are generated in CI.
-5. **JavaScript lives in `js/src/` only** — never in `packages/<brand>/`.
-6. **Colors use CSS custom properties** — `var(--#{$prefix}color-*)` enables runtime dark mode switching.
-7. **Accessibility is mandatory** — visible `:focus-visible`, ARIA attributes on all interactive elements, `.visually-hidden` for SR content.
-
-## Scoped Instructions
-
-Detailed conventions are loaded automatically based on the files you're working on. They live in `.github/instructions/`:
-
-- `scss.instructions.md` — SCSS conventions and patterns
-- `javascript.instructions.md` — JS conventions
-- `html-accessibility.instructions.md` — HTML structure and WCAG compliance
-- `tokens.instructions.md` — Token system rules
-- `components.instructions.md` — Component SCSS/JS patterns
-- `multi-brand.instructions.md` — Cross-brand synchronization
-
-## Workflows
-
-For complex multi-step tasks, follow the dedicated workflow guides:
-
-- `workflows/create-component.instructions.md` — Creating a new component
-- `workflows/diagnose-errors.instructions.md` — Debugging build/lint/CI errors
-- `workflows/validate-tokens.instructions.md` — Auditing token usage
-
-## Deep References
-
-For in-depth architecture knowledge, read the reference docs in `.github/instructions/references/`:
-
-- `token-architecture.md` — Full token pipeline and layer hierarchy
-- `glossary.md` — 154 project-specific terms
-- `project-map.md` — File structure, npm scripts, CI/CD jobs
+## Skills
+
+This project provides specialized skills in `.github/skills/`. Invoke them when relevant — they contain detailed conventions, workflows, and reference material:
+
+- **scss-conventions** — SCSS rules (variables, mixins, tokens, forbidden patterns)
+- **javascript-conventions** — JS rules (no-semi, BaseComponent, imports)
+- **accessibility** — WCAG 2.2 AAA/AA, ARIA, focus, contrast, touch targets
+- **token-system** — 3-tier token hierarchy, dark mode, auto-gen protections
+- **component-patterns** — CSS custom props, state overrides, markers
+- **multi-brand** — 3-brand architecture, cross-brand sync
+- **create-component** — Step-by-step workflow for new components
+- **diagnose-errors** — Error diagnostic decision tree
+- **validate-tokens** — Read-only token audit
+- **code-review** — Compliance checker (safety net before commit/PR)
+- **project-knowledge** — Glossary, npm scripts, CI/CD, file map

.github/instructions/components.instructions.md

@@ -0,0 +1,21 @@
+---
+applyTo: "**"
+---
+
+# Critical Rules (Non-Negotiable)
+
+These 7 rules apply to every file in OUDS Web. They are the minimum safety net — always enforced regardless of which skills are loaded.
+
+1. **Tokens over hardcoding** — Never use hardcoded colors (`#ff7900`), spacing (`16px`), or dimensions. Use `$ouds-*` tokens or `var(--#{$prefix}color-*)`.
+
+2. **Mixins for border-radius and transition** — Direct properties are Stylelint violations. Use `@include border-radius()` and `@include transition()`.
+
+3. **Auto-generated token files are read-only** — Never edit `_raw.scss`, `_semantic.scss`, `_component.scss`, or `_*-custom-props.scss`. Only `_composite.scss` is hand-editable.
+
+4. **Never commit dist/** — Build artifacts are generated in CI.
+
+5. **JS in js/src/ only** — Never put JavaScript in `packages/<brand>/`. JS is shared across all brands.
+
+6. **Colors via CSS custom properties** — Use `var(--#{$prefix}color-*)` for all colors. This enables dark mode switching at runtime.
+
+7. **Accessibility is mandatory** — Every interactive element needs: `@include focus-visible()`, correct ARIA attributes, `.visually-hidden` (never `display: none`) for SR content, 44×44px touch targets.