diff --git a/skills/migrate-to-ouds-web/SKILL.md b/skills/migrate-to-ouds-web/SKILL.md
new file mode 100644
index 0000000000..341d4858a7
--- /dev/null
+++ b/skills/migrate-to-ouds-web/SKILL.md
@@ -0,0 +1,91 @@
+---
+name: migrate-to-ouds-web
+description: 'Guides migration of a web project to OUDS Web (Orange Unified Design System). Use when the user wants to migrate from OB1 (@ob1/web), Boosted, or an older OUDS Web version to the latest OUDS Web. Covers: detecting source library from package.json, running npx @ouds/web-migrate with correct --from flag and glob pattern, and resolving manual migration warnings by finding correct OUDS Web component markup using the using-ouds-web skill. Triggers on: migrate to OUDS Web, migration from Boosted, migration from OB1, @ouds/web-migrate, update OUDS Web version.'
+---
+
+# Migrate to OUDS Web
+
+Step-by-step workflow for migrating a project to OUDS Web using the `@ouds/web-migrate` CLI tool.
+
+## Step 1 — Detect source library
+
+Read the project's `package.json` (`dependencies` and `devDependencies`) and map to the correct `--from` flag:
+
+| Dependency found | `--from` flag | Migration source |
+|---|---|---|
+| `@ob1/web` | `--from=ob1` | OB1 |
+| `boosted` | `--from=boosted` | Boosted |
+| `@ouds/web-common` | *(omit flag, default)* | Older OUDS Web |
+| None found | Ask the user | Unknown |
+
+If `ouds-web` or `@ouds/web-orange` is already present, the project is either fully migrated or partially migrated — confirm with the user before proceeding.
+
+## Step 2 — Choose file glob
+
+Inspect the project file types and pick a safe glob. **Never use `"**/*.*"`** — it modifies binary and unrelated files.
+
+| Project type | Recommended glob |
+|---|---|
+| HTML/CSS only | `"**/*.{css,scss,html}"` |
+| React (JSX/TSX) | `"**/*.{css,scss,html,jsx,tsx}"` |
+| Vue | `"**/*.{css,scss,html,vue}"` |
+| Angular | `"**/*.{css,scss,html,ts}"` |
+| Default (safe) | `"**/*.{css,scss,html}"` |
+
+Advise running in a version-controlled folder so changes can be reviewed with `git diff`.
+
+## Step 3 — Run the migration tool
+
+```bash
+# Migrate from Boosted
+npx @ouds/web-migrate --from=boosted "**/*.{css,scss,html}"
+
+# Migrate from OB1 (Vue project)
+npx @ouds/web-migrate --from=ob1 "**/*.{css,scss,html,vue}"
+
+# Update to latest OUDS Web version (from older OUDS)
+npx @ouds/web-migrate "**/*.{css,scss,html}"
+```
+
+The tool:
+- **Automatically replaces** known class names using regex
+- **Emits warnings** for deprecated/removed classes that require manual follow-up (one line per change needed)
+
+## Step 4 — Resolve warnings (manual steps)
+
+For each warning line in the output:
+
+1. Identify the component or class name mentioned in the warning
+2. Invoke the `using-ouds-web` skill to find the correct OUDS Web HTML structure for that component
+3. Apply the replacement manually in the affected files
+
+Example: if the warning mentions `.alert-success`, look up `alerts` in `using-ouds-web` references to find the correct `.alert-positive` / `.alert-neutral` structure.
+
+## Step 5 — Post-migration checklist
+
+- [ ] Review `git diff` to verify all automated replacements are correct
+- [ ] Update `package.json`: replace `boosted`/`@ob1/web` with `ouds-web` (or `@ouds/web-common` + `@ouds/web-orange`)
+- [ ] Update Sass/CSS imports (e.g. `@import "boosted"` → `@import "ouds-web"`)
+- [ ] Update CDN links in HTML files (`boosted.min.css` → `ouds-web.min.css`)
+- [ ] Search for leftover `class=" "` artifacts — the tool does **not** remove empty class attributes
+- [ ] Verify responsive breakpoints: OUDS Web uses 8 breakpoints with **prefix syntax** `{bp}:{utility}-{value}` (e.g. `lg:col-6`), not Bootstrap infix format (`col-lg-6`)
+
+## Known tool limitations
+
+- Empty `class=" "` attributes are left in place after class removal — clean up manually
+- Custom responsive classes with infixes (e.g. `something-2xl-left`) get renamed to `2xl:something-left` — review these carefully
+- Always inspect the diff before committing
+
+## Anti-patterns
+
+- ❌ Don't guess source library from class names — always check `package.json` first
+- ❌ Don't use `"**/*.*"` glob — modifies binary and irrelevant files
+- ❌ Don't stop after automated replacements — warnings require manual action
+- ❌ Don't skip the `git diff` review — automated replacements may need adjustment
+
+## References
+
+- Use the `using-ouds-web` skill for target component markup and class lookup during manual warning resolution
+- `packages/migrate/README.md` — full `@ouds/web-migrate` options and examples
+- `skills/using-ouds-web/references/getting-started/migration-from-boosted.md` — component-by-component Boosted→OUDS Web changes
+- `skills/using-ouds-web/references/getting-started/migration.md` — OUDS Web version-to-version changes
diff --git a/skills/using-ouds-web/SKILL.md b/skills/using-ouds-web/SKILL.md
new file mode 100644
index 0000000000..59bba7918a
--- /dev/null
+++ b/skills/using-ouds-web/SKILL.md
@@ -0,0 +1,213 @@
+---
+name: 'using-ouds-web'
+description: 'Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces. This skill should be used when generating HTML markup, CSS classes, or JavaScript code that uses OUDS Web components, utilities, layout system, or design tokens. Also use during migrations from Boosted, OB1, or older OUDS Web versions to look up correct OUDS Web component structure as replacement markup. It covers components (buttons, alerts, chips, forms, navigation), layout (grid, breakpoints, containers), utilities (spacing, colors, display, flex), and foundation (typography, color modes, CSS variables, Sass customization).'
+---
+
+# OUDS Web Library Reference
+
+## Overview
+
+OUDS Web is Orange's web implementation of the Orange Unified Design System. It is a fork of Bootstrap with significant modifications for Orange branding and accessibility.
+
+Key differences from standard Bootstrap:
+
+- **8 breakpoints** instead of 6: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
+- **Breakpoint prefix syntax** (v1.3.0+): responsive classes use `{breakpoint}:{utility}-{value}` prefix format, **not** the Bootstrap infix format `{utility}-{breakpoint}-{value}`. Example: `md:d-none`, `lg:col-6`, `sm:flex-row` (not `d-md-none`, `col-lg-6`, `flex-sm-row`)
+- **OUDS design tokens** for spacing, typography, and colors (e.g., `none`, `3xsmall`, `2xsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`, `3xlarge`)
+- **Semantic color system** with `bg-surface-*`, `text-*`, `border-*` token-based classes
+- **4 color modes**: `light`, `dark`, `root`, `root-inverted` (set via `data-bs-theme`)
+- **Orange-specific components**: header, footer, chips, tags, sticker, stepped-process, title-bar, skeleton, local-navigation, back-to-top, bullet-list, divider, quantity-selector
+- **Modified form components**: switch, checkbox, radio-button, text-input, text-area, select-input, password-input use `.control-item-*` pattern
+- **CSS variable prefix**: `--bs-`
+- **Container**: use `.container-fluid` (not fixed `.container`)
+- **Rounded corner buttons**: opt-in via `.use-rounded-corner-buttons` on a parent container
+- **Button variants**: `.btn-default`, `.btn-strong`, `.btn-brand`, `.btn-minimal`, `.btn-negative` (not Bootstrap's `.btn-primary`, `.btn-secondary`, etc.)
+
+## Quick start
+
+```html
+
+
+
+
+
+ OUDS Web
+
+
+
+
+```
+
+### Form components pattern
+
+OUDS Web form components use `.control-item-*` classes:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+### Button variants
+
+```html
+
+
+
+
+
+
+Next
+
+
+```
+
+### Icons (SVG sprite)
+
+```html
+
+```
\ No newline at end of file
diff --git a/skills/using-ouds-web/references/components/alerts.md b/skills/using-ouds-web/references/components/alerts.md
new file mode 100644
index 0000000000..d4c8364bdb
--- /dev/null
+++ b/skills/using-ouds-web/references/components/alerts.md
@@ -0,0 +1,102 @@
+# Alerts
+
+Two types: **alert message** (`.alert-message`) and **inline alert** (`.alert` alone).
+
+## Common structure
+
+- Base class: `.alert` on a `
`
+- `.alert-label` — mandatory title element
+- `.alert-icon` — icon container
+
+## Alert message
+
+Add `.alert-message` to `.alert`. Uses extra layout classes:
+
+- `.alert-container` — aligns content
+- `.alert-text-container` — vertically distributes text
+- `.alert-action-container` — wraps action link + close button
+- `.alert-close-container` — wraps `.btn-close` only (helps with rounded corners)
+
+```html
+
+
Error
+
+
+
Connection failed.
+
+
+
+```
+
+### Functional variants
+
+`.alert-negative`, `.alert-positive`, `.alert-info`, `.alert-warning` — do NOT add custom icons; icons are automatic.
+
+### Non-functional variants
+
+Default (no modifier) and `.alert-accent` — require a custom icon in `.alert-icon` (SVG, ``, or `.icon`). Icon can be removed entirely for non-functional alerts (add `.visually-hidden` context in label).
+
+### Custom icon (non-functional only)
+
+- Place `