UI5 · ilhan007 · Mar 13, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 13, 2026
diff --git a/docs/04-CLI.md b/docs/04-CLI.md
@@ -0,0 +1,112 @@
+---
+sidebar_label: CLI
+title: CLI
+---
+
+# CLI
+
+UI5 Web Components provides command-line tools for scaffolding projects and generating components.
+
+## Create a New Project
+
+Scaffold a fully configured UI5 Web Components package with a single command:
+
+```bash
+npm create @ui5/webcomponents-package
+```
+
+This launches an interactive wizard that sets up a ready-to-run TypeScript project with a sample component, theming, i18n, and a dev server.
+
+### Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--name` | Package name (npm-compatible, supports scopes) | `my-package` |
+| `--tag` | Component tag name (e.g., `my-button`) | Derived from class name |
+| `--testSetup` | Test setup: `cypress` or `manual` | `manual` |
+| `--skip` | Skip interactive prompts and use defaults | `false` |
+| `--skipSubfolder` | Create files in current directory instead of a subfolder | `false` |
+
+### Examples
+
+**Non-interactive with a custom name**
+
+```bash
+npm create @ui5/webcomponents-package -- \
+  --name "my-components" \
+  --skip
+```
+
+**Scoped package with Cypress testing**
+
+```bash
+npm create @ui5/webcomponents-package -- \
+  --name "@scope/my-lib" \
+  --testSetup "cypress" \
+  --skip
+```
+
+### What Gets Generated
+
+The scaffolded project includes:
+
+- A sample **web component** (`MyFirstComponent`) with a template, styles, and i18n
+- **Dev server** with hot reload (`npm start`)
+- **Build pipeline** for production (`npm run build`)
+- **TypeScript** configuration
+- **Cypress** test setup (if selected)
+- **ESLint** configuration
+- **Theming** infrastructure (SAP Horizon)
+
+After the project is created:
+
+```bash
+cd my-package
+npm install
+npm start
+```
+
+## Generate a Component
+
+Inside a scaffolded project, generate a new web component:
+
+```bash
+npm run create-ui5-element
+```
+
+This prompts for a PascalCase component name (e.g., `MyButton`) and generates three files:
+
+| File | Purpose |
+|------|---------|
+| `src/<Name>.ts` | Component class with `@customElement` decorator |
+| `src/<Name>Template.tsx` | JSX template |
+| `src/themes/<Name>.css` | Component styles |
+
+The tag name is derived automatically — `MyButton` becomes `my-my-button` (using the prefix from `.env`).
+
+You can also pass the name directly:
+
+```bash
+npm run create-ui5-element "MyButton"
+```
+
+After generating, import the component in `src/bundle.esm.ts`:
+
+```typescript
+import "./MyButton.js";
+```
+
+## Project Commands
+
+Every scaffolded project comes with these commands:
+
+| Command | Description |
+|---------|-------------|
+| `npm start` | Start the dev server with hot reload |
+| `npm run build` | Production build |
+| `npm run create-ui5-element` | Generate a new web component |
+| `npm run lint` | Lint the project |
+| `npm run clean` | Clean generated and build artifacts |
+| `npm test` | Run tests (if Cypress was selected) |
+
+[View on npm](https://www.npmjs.com/package/@ui5/create-webcomponents-package) · [GitHub](https://github.com/UI5/webcomponents/tree/main/packages/create-package)
diff --git a/docs/05-MCP-Server.md b/docs/05-MCP-Server.md
@@ -0,0 +1,72 @@
+---
+sidebar_label: MCP Server
+sidebar_class_name: sidebar-sparkle
+title: MCP Server
+---
+
+# MCP Server
+
+The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) server gives your AI assistant direct access to UI5 Web Components documentation, component APIs, and integration guides — no copy-pasting needed.
+
+## Setup
+
+Add the following entry to your MCP client configuration (e.g. `mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "@ui5/webcomponents-mcp-server": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@ui5/webcomponents-mcp-server"]
+    }
+  }
+}
+```
+
+### One-Click Setup
+
+**VS Code (GitHub Copilot)** — paste the JSON config above into your `.vscode/mcp.json`, or run:
+
+```bash
+code --add-mcp '{"name":"@ui5/webcomponents-mcp-server","type":"stdio","command":"npx","args":["-y","@ui5/webcomponents-mcp-server"]}'
+```
+
+**Claude Code**
+
+```bash
+claude mcp add \
+  --transport "stdio" \
+  --scope "user" \
+  "ui5-webc-mcp-server" \
+  -- npx -y "@ui5/webcomponents-mcp-server"
+```
+
+**Codex**
+
+```bash
+codex mcp add \
+  --transport "stdio" \
+  "ui5-webc-mcp-server" \
+  -- npx -y "@ui5/webcomponents-mcp-server"
+```
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `get_component_api` | Fetch API docs for any component — properties, slots, events, methods |
+| `get_guidelines` | Get integration guides for React, Angular, or vanilla JavaScript |
+| `list_docs` | List all available documentation with summaries |
+| `get_doc` | Fetch full content of a specific documentation page |
+
+## Example Prompts
+
+Once the MCP server is configured, try asking your AI assistant:
+
+- *"Show me the API for ui5-button"*
+- *"How do I use UI5 Web Components with React?"*
+- *"Show me the available documentation"*
+- *"Get the theming documentation"*
+
+[View on npm](https://www.npmjs.com/package/@ui5/webcomponents-mcp-server) · [GitHub](https://github.com/UI5/ui5-web-components-mcp-server)
diff --git a/docs/06-Skills.md b/docs/06-Skills.md
@@ -0,0 +1,56 @@
+---
+sidebar_label: Skills
+sidebar_class_name: sidebar-sparkle
+title: Skills
+---
+
+# Skills
+
+UI5 Web Components ships [Agent Skills](https://agentskills.io) — portable, structured knowledge files that teach AI coding assistants how to work with the library. Skills provide domain-specific guidance that goes beyond what a general-purpose LLM knows out of the box.
+
+## Available Skills
+
+| Skill | Description |
+|-------|-------------|
+| **styling** | How to customize and style UI5 Web Components — CSS shadow parts, custom states, CSS variables, and tag-level styling |
+| **accessibility** | How to make UI5 Web Components applications accessible — accessibility APIs, label-input relationships, invisible messaging, keyboard handling, and high contrast themes |
+
+## Installation
+
+Install all UI5 Web Components skills into your project:
+
+```bash
+npx skills add "UI5/webcomponents"
+```
+
+This downloads the skill files into your project so that AI assistants (Claude Code, Copilot, Cursor, etc.) can pick them up automatically.
+
+To install a specific skill:
+
+```bash
+npx skills add "UI5/webcomponents" --skill "styling"
+```
+
+### In the Repository
+
+When working inside the UI5 Web Components repository, AI coding assistants automatically discover and use the skills from the [`skills/`](https://github.com/UI5/webcomponents/tree/main/skills) directory — no setup needed.
+
+### Manual Setup
+
+You can also copy skills directly from the repository's [`skills/`](https://github.com/UI5/webcomponents/tree/main/skills) directory into your project's `.agents/skills/` folder:
+
+```
+your-project/
+└── .agents/
+    └── skills/
+        ├── styling/
+        │   └── SKILL.md
+        └── accessibility/
+            └── SKILL.md
+```
+
+## How Skills Work
+
+Each skill is a Markdown file (`SKILL.md`) with structured frontmatter (name, description, trigger conditions) and a body containing the actual guidance. When an AI assistant encounters a relevant task — for example, a question about styling a component — it uses the skill's content to provide accurate, project-specific answers instead of generic advice.
+
+Skills are part of the open [Agent Skills](https://agentskills.io) standard and work across AI tools that support it.
diff --git a/docs/4-development/01-package.md → docs/07-development/01-package.md b/docs/4-development/01-package.md → docs/07-development/01-package.md
diff --git a/docs/4-development/02-component.md → docs/07-development/02-component.md b/docs/4-development/02-component.md → docs/07-development/02-component.md
diff --git a/docs/4-development/03-properties.md → docs/07-development/03-properties.md b/docs/4-development/03-properties.md → docs/07-development/03-properties.md
diff --git a/docs/4-development/04-slots.md → docs/07-development/04-slots.md b/docs/4-development/04-slots.md → docs/07-development/04-slots.md
diff --git a/docs/4-development/05-events.md → docs/07-development/05-events.md b/docs/4-development/05-events.md → docs/07-development/05-events.md
diff --git a/docs/4-development/06-lifecycle-hooks.md → docs/07-development/06-lifecycle-hooks.md b/docs/4-development/06-lifecycle-hooks.md → docs/07-development/06-lifecycle-hooks.md
diff --git a/docs/4-development/07-styling.md → docs/07-development/07-styling.md b/docs/4-development/07-styling.md → docs/07-development/07-styling.md
diff --git a/docs/4-development/08-templates.md → docs/07-development/08-templates.md b/docs/4-development/08-templates.md → docs/07-development/08-templates.md
diff --git a/.../4-development/09-internationalization.md → ...07-development/09-internationalization.md b/.../4-development/09-internationalization.md → ...07-development/09-internationalization.md
diff --git a/docs/4-development/10-testing.md → docs/07-development/10-testing.md b/docs/4-development/10-testing.md → docs/07-development/10-testing.md
diff --git a/...opment/11-deep-dive-and-best-practices.md → ...opment/11-deep-dive-and-best-practices.md b/...opment/11-deep-dive-and-best-practices.md → ...opment/11-deep-dive-and-best-practices.md
diff --git a/docs/4-development/README.md → docs/07-development/README.md b/docs/4-development/README.md → docs/07-development/README.md
diff --git a/...5-contributing/01-development-workflow.md → ...8-contributing/01-development-workflow.md b/...5-contributing/01-development-workflow.md → ...8-contributing/01-development-workflow.md
@@ -37,7 +37,7 @@ The server will reload the pages whenever you make changes in the code.
 **4.1.** Read the dedicated tutorials for component developers:
 
 - [Development Conventions and Guidelines](02-conventions-and-guidelines.md);
-- [Developing Custom UI5 Web Components](../4-development/01-package.md);
+- [Developing Custom UI5 Web Components](../07-development/01-package.md);
 
 **4.2.** Create a local branch within your fork and work with it as usual.
 

diff --git a/...ributing/02-conventions-and-guidelines.md → ...ributing/02-conventions-and-guidelines.md b/...ributing/02-conventions-and-guidelines.md → ...ributing/02-conventions-and-guidelines.md
@@ -6,7 +6,7 @@ You may also find an ESLint integration for your favorite IDE [here](https://esl
 
 ## Testing
 Integration tests are implemented with [Cypress](https://www.cypress.io/). You can run all tests using `npm run test`.
-If reasonable, take the time and write a test for the proposed change or fix. Learn more about testing at the [Testing UI5 Web Components page](../4-development/10-testing.md).
+If reasonable, take the time and write a test for the proposed change or fix. Learn more about testing at the [Testing UI5 Web Components page](../07-development/10-testing.md).
 
 ## Git Guidelines
 

diff --git a/docs/5-contributing/03-DoD.md → docs/08-contributing/03-DoD.md b/docs/5-contributing/03-DoD.md → docs/08-contributing/03-DoD.md
diff --git a/docs/5-contributing/04-website.md → docs/08-contributing/04-website.md b/docs/5-contributing/04-website.md → docs/08-contributing/04-website.md
diff --git a/docs/5-contributing/README.md → docs/08-contributing/README.md b/docs/5-contributing/README.md → docs/08-contributing/README.md
diff --git a/docs/6-migration-guides/01-to-version-2.md → docs/09-migration-guides/01-to-version-2.md b/docs/6-migration-guides/01-to-version-2.md → docs/09-migration-guides/01-to-version-2.md
diff --git a/docs/6-migration-guides/README.md → docs/09-migration-guides/README.md b/docs/6-migration-guides/README.md → docs/09-migration-guides/README.md
diff --git a/docs/08-Releases.md → docs/10-Releases.md b/docs/08-Releases.md → docs/10-Releases.md
diff --git a/docs/09-FAQ.md → docs/11-FAQ.md b/docs/09-FAQ.md → docs/11-FAQ.md
@@ -27,7 +27,7 @@ sidebar_label: FAQ
 
 **Q: Can I create my own UI5 Web Components?**
 
-**A:** Yes, for more information see [Creating a Custom UI5 Web Components Package](4-development/01-package.md)
+**A:** Yes, for more information see [Creating a Custom UI5 Web Components Package](07-development/01-package.md)
 
 
 **Q: How can I customize UI5 Web Components' styles?**

diff --git a/docs/2-advanced/08-using-i18n-for-apps.md b/docs/2-advanced/08-using-i18n-for-apps.md
@@ -10,7 +10,7 @@ None of the code below implies or requires the usage of UI5 Web Components, and
 The `@ui5/webcomponents-base` package allows the usage of `i18n` functionality not just for UI5 Web Components,
 but for apps as well.
 
-*Note:* This section is dedicated to apps. For information on how to set up `i18n` for your custom components, please see [Developing Web Components](../4-development/01-package.md).
+*Note:* This section is dedicated to apps. For information on how to set up `i18n` for your custom components, please see [Developing Web Components](../07-development/01-package.md).
 
 ## Step-by-Step Tutorial
 

diff --git a/docs/README.md b/docs/README.md
@@ -6,17 +6,19 @@ With UI5 Web Components, developers can leverage a powerful, flexible, and futur
 
 ## Key Features of UI5 Web Components
 
-- Enterprise-Grade: A comprehensive collection of reusable UI elements that adhere to enterprise standards - accessibility, themeability, i18n and more.
+- **Enterprise-Grade:** A comprehensive collection of reusable UI elements that adhere to enterprise standards - accessibility, themeability, i18n and more.
 
-- Framework Agnostic: Fully compatible with any current or future web development frameworks such as React, Angular, and Vue, allowing seamless integration into any tech stack.
+- **Framework Agnostic:** Fully compatible with any current or future web development frameworks such as React, Angular, and Vue, allowing seamless integration into any tech stack.
 
-- Elegant: Being custom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.
+- **Elegant:** Being custom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.
 
-- Consistent User Experience: Implementing the [SAP Fiori design](https://experience.sap.com/fiori-design/) and adhering to the [SAP Fiori Design Guidelines](https://experience.sap.com/fiori-design-web/) ensures a consistent and intuitive user experience across all applications.
+- **Consistent User Experience:** Implementing the [SAP Fiori design](https://experience.sap.com/fiori-design/) and adhering to the [SAP Fiori Design Guidelines](https://experience.sap.com/fiori-design-web/) ensures a consistent and intuitive user experience across all applications.
 
-- Open Source: UI5 Web Components is an open-source project available to the general public, inviting developers from all backgrounds to contribute and benefit.
+- **Open Source:** UI5 Web Components is an open-source project available to the general public, inviting developers from all backgrounds to contribute and benefit.
 
-- SAP Backing: Developed and maintained by [SAP](https://sap.com) as part of the [UI5](https://openui5.org/) product family, guaranteeing ongoing support and integration with SAP's ecosystem.
+- **SAP Backing:** Developed and maintained by [SAP](https://sap.com) as part of the [UI5](https://openui5.org/) product family, guaranteeing ongoing support and integration with SAP's ecosystem.
+
+- **AI-Ready:** The project is structured for AI-assisted development with an [MCP server](./05-MCP-Server.md) for direct IDE integration, a machine-readable [llms.txt](/llms.txt) file, an [AGENTS.md](https://github.com/UI5/webcomponents/blob/main/AGENTS.md) guide for coding assistants, installable [Agent Skills](./06-Skills.md), and a dedicated set of [AI components](/components/ai/) for building conversational and generative AI interfaces.
 
 
 ## Ecosystem
@@ -27,7 +29,11 @@ UI5 Web Components are complemented by a range of related projects that enhance
 
 [UI5 Web Components for React](https://github.com/UI5/webcomponents-react) is a wrapper implementation around UI5 Web Components which makes using them in React even more comfortable. The current version of React (`react 18`) has some shortcomings when it comes to handling Custom Elements, namely the binding of `boolean` attributes as well as adding event listeners to custom event names like `selection-change`. With the help of UI5 Web Components for React, you can use the UI5 Web Components in React as if they were native React components. In addition to that, this library is also offering some complex layout components built on top of UI5 Web Components as well as Charting Components.
 
-**Note:** [React 19](https://react.dev/blog/2024/04/25/react-19) promises to fill all gaps in the web coponents support - the binding of `boolean` attributes and subscribing to custom events.
+#### Native Web Components Support in React 19
+
+[React 19](https://react.dev/blog/2024/04/25/react-19) introduces full native support for Custom Elements, resolving the long-standing gaps in how React handles web components. Specifically, React 19 correctly binds `boolean` attributes, passes properties (not just attributes) to custom elements, and supports subscribing to custom events. This means you can use UI5 Web Components directly in React 19 without a wrapper library — they work just like any other HTML element.
+
+The UI5 Web Components for React library remains valuable for its additional features — higher-level layout components, charting components, and TypeScript definitions — but it is no longer required for basic usage.
 
 ### UI5 Web Components for Angular
 

diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -311,6 +311,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
+      additionalLanguages: ['bash', 'json'],
     },
   } satisfies Preset.ThemeConfig,
 };