feat: add ignite-ui-cli skill and command reference documentation

skills/ignite-ui-cli-skill.md

@@ -0,0 +1,139 @@
+---
+name: Ignite UI CLI Scaffolding & Component Architect
+description: Use when the user wants to scaffold an Ignite UI project, add components, serve, build, test, upgrade packages, or asks about ig CLI, igx, igr, Ignite UI, or Infragistics. Do NOT use for general Angular/React questions unrelated to Ignite UI.
+---
+
+## Role
+You are the **Ignite UI Architect**. Guide developers using the `ig` CLI to build enterprise-grade UIs. Always prefer CLI commands over manual file creation. Consult `skills/reference/commands.md` for full command options and template tables.
+
+---
+
+## Non-Negotiable Rules
+
+1. **Always run `ig list` before `ig add`** — never assume a templateId. They change between versions.
+2. **Never run `ig add` outside a project folder** — confirm the folder has a local Ignite UI CLI config (`ignite-ui-cli.json`), whether created via `ig new`, Angular schematics, or `ng add`.
+3. **Quickstart (step-by-step) projects do NOT support `ig add`** — warn the user before attempting.
+4. **Never hardcode ports** — tell the user to check `ig start` output for the actual URL.
+5. **Always remind the user to remove `fake-backend.service.ts` before any deployment** when using `--template=side-nav-auth`.
+
+---
+
+## Workflow
+
+Always follow this order:
+
+```bash
+ig list                          # 1. verify templateId
+ig new "AppName" [options]       # 2. scaffold project
+cd AppName
+ig add <templateId> <Name>       # 3. generate component
+ig start                         # 4. build + serve
+```
+
+---
+
+## Command Cheat Sheet
+
+| Command | Purpose |
+|---------|---------|
+| `ig` / `ig new` | Interactive wizard OR non-interactive scaffold |
+| `ig add <id> <name>` | Generate component with auto-wired routing/modules |
+| `ig list` | List available templates for current project |
+| `ig start [--port=N]` | Build + serve + open in browser |
+| `ig build` | Compile only |
+| `ig test` | Run test suite |
+| `ig config get/set/add` | Read/write `ignite-ui-cli.json` config |
+| `ig doc <term>` | Open Infragistics docs search in browser |
+| `ig generate` | Create a custom component template |
+| `ig --help` / `ig -h` | List all available commands |
+
+> Full syntax, flags, and template tables → `skills/reference/commands.md`
+
+---
+
+## Error Recovery
+
+| Symptom | Likely Cause | Fix |
+|---------|-------------|-----|
+| `ig add` does nothing | Not inside a project folder | `cd` into the project root |
+| Component missing from nav | `--skip-route` was used | Manually add route to `app-routing.module.ts` |
+| 403/404 on build | Missing Infragistics licensed account | Log in or switch to OSS packages |
+| Port already in use | Conflict on default port | `ig start --port=4201` |
+| Prompts don't render | Unsupported terminal (Inquirer.js) | Use Windows Terminal, iTerm2, or VS Code terminal |
+| Module not found after `ig add` | Wrong Angular module path | Use `--module=path/to/module.ts` relative to `/src/app/` |
+
+---
+
+## Authentication Template (Angular Only)
+
+When the user wants login/signup out of the box:
+
+```bash
+ig new "MyApp" --framework=angular --type=igx-ts --template=side-nav-auth
+```
+
+Includes: login/signup dialogs, JWT `AuthenticationService`, `AuthGuard`, `UserService`, and optional Google/Microsoft/Facebook provider stubs.
+
+**Always tell the user:**
+- Remove `fake-backend.service.ts` before any deployment
+- JWT in localStorage is XSS-vulnerable — use HttpOnly cookies in production
+- Uncomment the desired provider in `app.module.ts` and supply a real `<CLIENT_ID>`
+
+> Full file structure and production checklist → `skills/reference/commands.md`
+
+---
+
+## Upgrading
+
+```bash
+npm install -g igniteui-cli                                       # update CLI globally
+ng update igniteui-angular                                        # update Ignite UI for Angular
+ng g @igniteui/angular-schematics:upgrade-packages                # trial → licensed migration
+```
+
+Warn users: the upgrade schematic rewrites sources to `packages.infragistics.com`. A licensed Infragistics account is required — trial accounts get 403 errors.
+
+---
+
+## Prerequisites (Share on First Setup)
+
+```
+✅ Node.js LTS (v20.x)       →  node --version
+✅ npm                        →  npm --version
+✅ igniteui-cli               →  npm install -g igniteui-cli
+✅ Git (optional)             →  ig new auto-inits a repo; skip with --skip-git
+✅ Infragistics account       →  only needed for licensed/Grid components
+```
+
+> macOS install failure? Run: `sudo xcode-select --install`
+
+---
+
+## Examples
+
+**"Create a new Angular app with a hierarchical grid"**
+```bash
+ig new "Dashboard" --framework=angular --type=igx-ts --template=side-nav
+cd Dashboard
+ig list                          # confirm: hierarchical-grid templateId
+ig add hierarchical-grid MainGrid
+ig start
+```
+
+**"Add a category chart to my existing React app"**
+```bash
+ig list                          # confirm: category-chart templateId
+ig add category-chart SalesChart
+```
+
+**"Set up Angular with login out of the box"**
+```bash
+ig new "MyApp" --framework=angular --type=igx-ts --template=side-nav-auth
+# Remember: remove fake-backend.service.ts before deploying
+```
+
+**"Upgrade my project from trial to licensed packages"**
+```bash
+ng g @igniteui/angular-schematics:upgrade-packages
+# Will prompt for Infragistics credentials
+```

skills/reference/commands.md

@@ -0,0 +1,242 @@
+# Ignite UI CLI — Command Reference
+
+> **When to consult this file:** The skill (`ignite-ui-cli-skill.md`) covers rules, workflow, and quick syntax. Come here when you need the full flag list for a command, the complete template ID tables, port defaults, the auth file structure, or the production checklist. This file is reference material — not behavioral instructions.
+
+---
+
+## `ig new` — Full Syntax
+
+Creates a new project with Ignite UI infrastructure pre-configured and dependencies installed.
+
+```bash
+ig new "<AppName>" --framework=<f> --type=<t> --template=<tmpl> --theme=<theme>
+```
+
+### Framework + Type Combinations
+
+| Framework | Type | Notes |
+|-----------|------|-------|
+| Angular | `igx-ts` | Ignite UI for Angular — standalone components (v13.1.0+) |
+| Angular | `igx-ts-legacy` | Ignite UI for Angular — module-based bootstrapping |
+| Angular | `ig-ts` | Ignite UI Angular JS Wrappers |
+| React | `igr-es6` | Ignite UI for React (native components) |
+| React | `ig-ts` | Ignite UI jQuery React Wrappers |
+| jQuery | `js` | Default — `--type` not required |
+
+### Templates
+
+| Value | Description |
+|-------|-------------|
+| `side-nav` | Side navigation shell (default) |
+| `navbar` | Top navigation bar shell |
+| `base` | Minimal blank app |
+| `side-nav-auth` | Side nav + full auth module (Angular igx-ts only) |
+
+### All Flags
+
+| Flag | Notes |
+|------|-------|
+| `--framework` / `-f` | `angular`, `react`, `jquery`, `webcomponents` |
+| `--type` / `-t` | See table above |
+| `--template` | See table above |
+| `--theme` | Theme name (options depend on selected project library) |
+| `--skip-install` | Skip automatic npm install |
+| `--skip-git` | Skip Git repository initialization |
+
+---
+
+## `ig add` — Full Syntax
+
+Generates a component and automatically integrates it into routing and module systems. Must be run inside an existing project created with `ig new` or via `ng add igniteui-angular`. Quickstart (step-by-step) projects do NOT support this command.
+
+```bash
+ig add <templateId> <ComponentName> [options]
+```
+
+### Flags
+
+| Flag | Version | Notes |
+|------|---------|-------|
+| `--module` / `-m` | v2.0.0 | Angular only. Path to `.module.ts` relative to `/src/app/` |
+| `--skip-route` / `-skr` | v3.2.0 | Suppress auto-generating a navigation route |
+
+### Example with flags
+
+```bash
+ig add grid AdminGrid --module=admin/admin.module.ts --skip-route
+```
+
+---
+
+## `ig list` — Usage
+
+Lists all available templates for the current project's framework and type. Always run before `ig add` — the tables below may lag behind new releases, but `ig list` is always current.
+
+```bash
+ig list                                    # inside a project — uses project's framework
+ig list --framework=angular --type=igx-ts
+ig list -f react
+ig l                                       # alias
+```
+
+When run inside a project folder, the project's framework takes precedence over any flags passed.
+
+> ⚠️ Always run `ig list` to confirm templateIds.
+
+---
+
+## `ig start` — Serve 
+
+Builds the application, starts a web server, and opens it in the default browser.
+
+```bash
+ig start
+ig start --port=1234
+ig start -p=1234
+```
+---
+
+## `ig build` — Compile Only
+
+Compiles the project without launching a server. Installs npm dependencies and resolves OSS vs. licensed packages — prompts for Infragistics credentials if a licensed component (e.g. Grid) is detected. 
+
+```bash
+ig build
+```
+
+---
+
+## `ig test` — Run Tests
+
+Runs the test suite for the current project using the framework's configured test environment. Supported for Angular, React, and jQuery projects.
+
+```bash
+ig test
+```
+
+---
+
+## `ig generate` — Custom Template
+
+Creates a new custom component template scaffold. Registers the template path in the global config under `customTemplates` so it becomes available via `ig list` and `ig add`.
+
+```bash
+ig generate
+```
+
+Runs interactively — prompts for template name, framework, and file structure.
+
+---
+
+## `ig doc` — Documentation Search
+
+Opens the Infragistics knowledge base in the default browser for a given search term.
+
+```bash
+ig doc igx-grid
+ig doc "igx-grid paging help"
+ig doc                            # prompts for a search term interactively
+```
+
+---
+
+## `ig config` — Full Syntax
+
+Reads and writes CLI configuration stored in `ignite-ui-cli.json`.
+
+```bash
+ig config get <property> [--global]
+ig config set <property> <value> [--global]
+ig config add <property> <value> [--global]
+```
+
+- Local config: `ignite-ui-cli.json` in project root
+- Global config: user home directory (`~` on Unix / `C:\Users\<user>` on Windows)
+- Custom templates registered under `customTemplates` via `ig generate`
+
+---
+
+## Authentication Template — Full Detail
+
+Scaffolds a full client-side auth module on top of the side-nav shell. Angular `igx-ts` only.
+
+```bash
+ig new "MyApp" --framework=angular --type=igx-ts --template=side-nav-auth
+```
+
+### Files Generated under `src/app/authentication/`
+
+| File | Purpose |
+|------|---------|
+| `authentication.module.ts` | Exports all auth components and services |
+| `authentication-routing.module.ts` | Login-related routes |
+| `services/user.service.ts` | Current user state |
+| `services/authentication.service.ts` | JWT logic wired to REST endpoints |
+| `services/fake-backend.service.ts` | **Dev-only mock — remove before deployment** |
+
+### Enable External Providers
+
+Uncomment in `app.module.ts`:
+
+```typescript
+// this.externalAuthService.addGoogle('<CLIENT_ID>');
+// this.externalAuthService.addMicrosoft('<CLIENT_ID>');
+// this.externalAuthService.addFacebook('<CLIENT_ID>');
+```
+
+### Production Checklist
+
+- [ ] Remove `fake-backend.service.ts` and its `BackendProvider` from `app.module.ts`
+- [ ] Replace localStorage JWT with HttpOnly cookies (localStorage is XSS-vulnerable)
+- [ ] Set correct redirect URLs and allowed origins in each provider's developer console
+- [ ] Never commit `<CLIENT_ID>` values — use environment variables
+
+---
+
+## Updating & Upgrading
+
+### Update CLI
+
+```bash
+npm install -g igniteui-cli           # global update
+ng update igniteui-cli                # within Angular project
+ng update igniteui-angular            # keep in sync with @angular/core and @angular/cli
+```
+
+### Migrate Trial → Licensed
+
+```bash
+ng g @igniteui/angular-schematics:upgrade-packages
+
+# Yarn users — skip install, then run yarn manually
+ng g @igniteui/angular-schematics:upgrade-packages --skip-install
+yarn install
+```
+
+Rewrites package sources to `packages.infragistics.com`. Requires a **licensed** Infragistics account — trial accounts receive 403 errors.
+
+---
+
+## Angular Schematics Alternative
+
+For Angular CLI projects not created with `ig new`:
+
+```bash
+npm i -g @igniteui/angular-schematics
+ng add igniteui-angular                                            # wire into existing project
+ng g @igniteui/angular-schematics:<templateId> --name=<n>      # add a component
+ng new --collection=@igniteui/angular-schematics                   # new project via schematics
+```
+
+---
+
+## Step-by-Step Interactive Mode
+
+Running `ig` or `ig new` without arguments launches the Inquirer.js wizard:
+
+- **Arrow keys** — navigate options
+- **Space** — toggle features (e.g. sorting, paging on grids)
+- On completion: auto-installs packages, builds, and opens the app in the browser
+
+Supported terminals: Windows Terminal, iTerm2, VS Code integrated terminal.
+Quickstart projects created this way **do not support `ig add`**.