feat: add new styling and accessibility Skills (#13261)

* docs: add AI Tooling page to documentation website

Surface the MCP server, llms.txt, AGENTS.md, and AI components
package on the docs website so developers can discover AI-assisted
development tooling.

* docs: align page title with sidebar label

* docs: update

* docs: restructure AI docs into CLI, MCP Server, Skills

- Split "AI Development" into focused pages:
  CLI, MCP Server, and Skills
- Add CLI page for project scaffolding
  and component generation
- Add Skills page for Agent Skills
- Add AI-Ready bullet to Introduction
- Add bash/json Prism highlighting
- Add styling Agent Skill (SKILL.md)
- Renumber sidebar and fix broken links

* docs: add NEW badge to MCP Server and Skills, align sidebar badges

- Add sidebar-sparkle class for highlighting new doc pages
- Align NEW/EXP/DEPR component badges to consistent style
- Vertically center all sidebar badges

* feat: add addCustomCSS as last resort in styling skill

* feat: add accessibility Agent Skill

Covers accessibility APIs, label-input
relationships, invisible messaging, icon
modes, high contrast themes, and tooltips.

* docs: fix Skills page installation instructions

Remove npx skills add instructions that don't
work. Skills are auto-discovered in the repo
and manually copied for external projects.

* docs: restore npx skills add instructions

Skills are discoverable via npx skills add
once the branch is merged to main.

* docs: fix GitHub org references from SAP/ui5-webcomponents to UI5/webcomponents

* docs: improve homepage title and meta description

* docs: refine addCustomCSS guidance in styling skill

* fix: pin sidebar badges to header row in expanded categories

* docs: add "Ask AI" dropdown to documentation pages

Adds an "Ask AI" dropdown button to all doc page headers that lets
users copy page content or open it in AI tools (Claude, ChatGPT, v0,
GitHub Copilot) with a pre-filled prompt about the page being viewed.

Component pages include a "View source" link to the GitHub source file.

* fix: align Ask AI button with page title using float right

Use float:right so the button consistently aligns next to the h1
on both component pages (synthetic title) and regular doc pages
(title from markdown content). Remove the Layout swizzle.

Author: ilhan007

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)

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)

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.