feat(skills): consolidate Ignite UI CLI documentation and templates into structured reference files

Author: Marina-L-Stoyanova

skills/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: igniteui
+description: >
+  Use this skill for anything related to Ignite UI — scaffolding projects, adding components,
+  serving, building, testing, upgrading packages, or working with the ig CLI. Also triggers for
+  configuring or working with Ignite UI components (IgxGrid, IgrGrid, IgbGrid, IgcGrid, charts,
+  buttons, combos, date pickers, etc.) across Angular, React, Blazor, or Web Components. Trigger
+  whenever the user mentions "igniteui", "ignite ui", "igx", "igr", "igb", "igc", "ig cli",
+  "infragistics", or asks about scaffolding, building, or customizing an Ignite UI app —
+  don't wait for an explicit skill request.
+compatibility:
+  - igniteui-mcp-server
+---
+
+# Ignite UI Skill
+
+## Non-Negotiable Rules
+
+1. **Always use an Ignite UI component** when one exists. Never reach for plain HTML, third-party libs, or custom implementations. If unsure, use `ig list` or call `search_docs` / `list_components` first.
+2. **Never guess component APIs.** Call `get_doc` before writing component code. APIs change between versions.
+3. **Always run `ig list` before `ig add`** — never assume a templateId.
+4. **Never run `ig add` outside a project folder** — confirm `ignite-ui-cli.json` is present.
+5. **Always warn users to remove `fake-backend.service.ts` before any deployment** when using `--template=side-nav-auth`.
+
+---
+
+## Prerequisite — MCP Server Setup (REQUIRED)
+
+**Project requirements:**
+- The **Ignite UI MCP server** (`igniteui-mcp-server`) available as a tool provider
+
+> **AGENT INSTRUCTION — MUST RUN BEFORE ANY IGNITE UI WORK**
+>
+> Before using any `igniteui-mcp-server` tools, verify the server is available by calling `list_components`.
+> If the tool is unavailable or the call fails, you MUST automatically configure it —
+> do NOT ask the user to do it manually.
+>
+> Detect the user's editor and write the config to the correct location:
+>
+> **VS Code** → `.vscode/mcp.json`
+>
+>     {
+>       "servers": {
+>         "igniteui-mcp-server": {
+>           "command": "npx",
+>           "args": ["-y", "igniteui-mcp-server"]
+>         }
+>       }
+>     }
+>
+> **Cursor** → `.cursor/mcp.json`
+>
+>     {
+>       "mcpServers": {
+>         "igniteui-mcp-server": {
+>           "command": "npx",
+>           "args": ["-y", "igniteui-mcp-server"]
+>         }
+>       }
+>     }
+>
+> **Claude Desktop** → `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS)
+> or `%APPDATA%\Claude\claude_desktop_config.json` (Windows)
+>
+>     {
+>       "mcpServers": {
+>         "igniteui-mcp-server": {
+>           "command": "npx",
+>           "args": ["-y", "igniteui-mcp-server"]
+>         }
+>       }
+>     }
+>
+> After writing the file, inform the user the MCP server has been configured and they may need
+> to reload their editor for the tools to activate. Wait for the server to start before continuing.
+> Do NOT skip this step.
+
+---
+
+## Step 1 — Confirm the Framework
+
+Infer from context (`.tsx` files → React, `Igx` prefix → Angular, etc.). If ambiguous, call `detect_platform`.
+
+| Framework      | `framework` value | Component Prefix |
+|----------------|-------------------|-----------------|
+| Angular        | `angular`         | `Igx`           |
+| React          | `react`           | `Igr`           |
+| Blazor         | `blazor`          | `Igb`           |
+| Web Components | `webcomponents`   | `Igc`           |
+
+---
+
+## Step 2 — Scaffold *(new projects only — skip for existing)*
+ 
+```
+1. list_components()              → survey available components
+2. generate_ignite_app(           → scaffold the project
+     framework, projectName,
+     template, outputPath
+   )
+3. cd output → npm install → npm start
+```
+ 
+Read `references/scaffolding.md` for template selection guidance (`empty` / `base` / `side-nav`) and the post-scaffold checklist.
+Read `references/cli-commands.md` only if you need `ig add` or other CLI commands after scaffolding.
+ 
+---
+
+## Step 3 — Look Up Component Docs
+
+Use `igniteui-mcp-server` tools — always in this order:
+
+```
+search_docs("row pinning", "angular")     → find the doc name
+list_components(filter="chart")           → browse what's available
+get_doc("angular", "grid-row-pinning")    → read full API BEFORE writing code
+```
+
+---
+
+## Step 4 — Implement
+
+Write component code only after reading `get_doc`. Use Ignite UI components exclusively — no plain HTML equivalents.
+
+---
+
+
+## Reference Files
+
+Load on demand — do not preload:
+
+| File | Load when… |
+|------|-----------|
+| `references/cli-commands.md` | Need full flag lists, all `--type` values, port options, `ig config` syntax |
+| `references/scaffolding.md` | Choosing a project template; post-scaffold checklist; file types by framework |
+| `references/packages.md` | OSS vs licensed setup, registry auth, license key config (v16+), switching OSS ↔ licensed |
+| `references/auth-template.md` | Using `--template=side-nav-auth`; production checklist; external provider setup |
+| `references/common-mistakes.md` | **Before submitting any code** — pre-flight checklist |