(feat): New skill for generating apps/views from image

skills/igniteui-angular-from-design/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: igniteui-from-design
+description: >
+  Implement Angular application views from design images using Ignite UI Angular components.
+  Uses MCP servers (igniteui, igniteui-theming, angular-cli) to discover components, generate
+  themes, and follow best practices. Triggers when the user provides a design image (screenshot,
+  mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components.
+  Also triggers when the user asks to "implement this design", "build this UI", "convert this
+  mockup", or "create a page from this image" in an Ignite UI Angular project.
+---
+
+# Implementing Ignite UI Angular Views from Design Images
+
+## Workflow
+
+1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure, colors, and data patterns
+2. **Detect platform** - Call `mcp__igniteui-theming__detect_platform` to confirm Angular + licensed status
+3. **Discover components** - Call `mcp__igniteui__list_components` with targeted filters to find matching components for each UI pattern
+4. **Look up component docs** - Call `mcp__igniteui__get_doc` for unfamiliar components to learn their API
+5. **Get best practices** - Call `mcp__angular-cli__get_best_practices` with the workspace path
+6. **Generate theme** - Call `mcp__igniteui-theming__create_theme` (or `create_palette`) with colors extracted from the design
+7. **Install packages** - Install any additional DV packages needed (charts, maps, gauges)
+8. **Implement** - Build the app shell, data layer, and view components
+9. **Iterate** - Compare output vs design image, fix visual differences
+
+## Step 1: Analyze the Design Image
+
+Read the input image carefully. For each visual section, identify:
+
+- **Layout structure**: grid rows/columns, sidebar, navbar, content area proportions
+- **Component type**: chart, list, card, map, gauge, table, form, etc.
+- **Color palette**: primary, secondary, surface/background, accent, text colors
+- **Typography**: font sizes, weights, letter-spacing patterns
+- **Data patterns**: what mock data is needed (time series, lists, KPIs, geographic)
+
+## Step 2-3: Use MCP Tools for Discovery
+
+Call `mcp__igniteui-theming__detect_platform` first to confirm the project setup.
+
+Then call `mcp__igniteui__list_components` with `framework: "angular"` and relevant filters to find components matching each UI pattern. Common filters:
+
+- `chart`, `sparkline` - for data visualization
+- `list`, `card`, `avatar`, `badge` - for data display
+- `nav`, `navbar`, `drawer` - for navigation
+- `progress`, `gauge` - for metrics
+- `map` - for geographic displays
+- `grid` - for tabular data
+
+For component-to-Ignite-UI mapping, see [references/component-mapping.md](references/component-mapping.md).
+
+## Step 4: Look Up Component API
+
+For any component you haven't used before, call `mcp__igniteui__get_doc` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "angular"`). This gives exact usage patterns, inputs, and template structure.
+
+Call `mcp__igniteui__search_docs` for feature-based questions (e.g., "how to style area chart dark theme").
+
+## Step 5: Generate Theme with MCP
+
+Extract colors from the design image, then call:
+
+```
+mcp__igniteui-theming__create_theme({
+  primaryColor: "<extracted primary>",
+  secondaryColor: "<extracted secondary>",
+  surfaceColor: "<extracted background>",
+  variant: "dark" or "light",
+  platform: "angular",
+  licensed: true/false,
+  fontFamily: "<extracted font>",
+  designSystem: "material"
+})
+```
+
+Use `create_palette` instead if only the palette needs customization. Use `create_component_theme` for per-component overrides (navbar, drawer, list backgrounds).
+
+## Step 6: Install DV Packages
+
+Core UI components ship with `@infragistics/igniteui-angular`. Charts, maps, gauges, and sparklines require additional packages. See [references/component-mapping.md](references/component-mapping.md) for package names and import patterns.
+
+## Step 7: Implement
+
+### Structure
+
+- **App shell**: navbar + nav drawer + router-outlet in root component
+- **Data layer**: interfaces in `models/`, injectable service with mock data in `services/`
+- **View**: CSS Grid layout with panel sections in the routed component
+
+### Key Implementation Rules
+
+- Use Angular project conventions from `CLAUDE.md` / `AGENTS.md` (standalone components, OnPush, signals, `@if`/`@for`, `inject()`)
+- Set all DV component colors explicitly via inputs — they do NOT inherit the Sass theme
+- For dark themes, use `$dark-material-schema` and define CSS custom properties for panel styling
+- Use `::ng-deep` with component theme mixins (`navbar-theme`, `navdrawer-theme`, `list-theme`) for core UI dark styling
+
+### Common Pitfalls
+
+Consult [references/gotchas.md](references/gotchas.md) for known issues including:
+- Sass function name collisions (`contrast()`)
+- Font family syntax in typography mixin
+- Chart marker visibility, missing properties
+- Avatar/component property mismatches
+- Map dark styling and programmatic series setup
+
+## Step 8: Iterate on Visual Fidelity
+
+After the first build, compare the output screenshot against the original design. Common fixes:
+
+- **Chart too spiky**: increase data points (300-500), use exponential smoothing, set `[markerTypes]="'none'"`
+- **Map too dark/light**: adjust CSS filter values (`grayscale`, `brightness`, `saturate`)
+- **Panel proportions wrong**: adjust CSS Grid `grid-template-columns` ratios
+- **Missing content sections**: re-examine the original design for overlooked elements
+- **Nav drawer in wrong mode**: remove `igxDrawerMini` template if full mode is needed, or vice versa
+
+Rebuild, take a new screenshot, and compare again until satisfied.

skills/igniteui-angular-from-design/references/component-mapping.md

@@ -0,0 +1,96 @@
+# Ignite UI Angular Component Mapping Reference
+
+## Table of Contents
+- [Dashboard & Layout Components](#dashboard--layout-components)
+- [Chart Components](#chart-components)
+- [Data Display Components](#data-display-components)
+- [Map Components](#map-components)
+- [Gauge Components](#gauge-components)
+- [Package Requirements](#package-requirements)
+- [Import Patterns](#import-patterns)
+
+## Dashboard & Layout Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Top navigation bar | `IgxNavbarComponent` | `igxNavbarAction`, `igxNavbarTitle` |
+| Side navigation | `IgxNavigationDrawerComponent` | `[pin]`, `[pinThreshold]`, `igxDrawer` template, `igxDrawerMini` template |
+| Content cards/panels | `IgxCardComponent` | `igxCardHeader`, `igxCardContent`, `igxCardActions` |
+| Tabbed content | `IgxBottomNavComponent` or `IgxTabsComponent` | Panel-based or router-based |
+| Accordion sections | `IgxAccordionComponent` | `IgxExpansionPanelComponent` children |
+| Split layouts | `IgxSplitterComponent` | Horizontal/vertical panes |
+| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) |
+
+## Chart Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Area chart | `IgxCategoryChartComponent` | `chartType="area"`, `[markerTypes]="'none'"`, `[areaFillOpacity]` |
+| Line chart | `IgxCategoryChartComponent` | `chartType="line"` |
+| Column/bar chart | `IgxCategoryChartComponent` | `chartType="column"` |
+| Sparkline (mini chart) | `IgxSparklineComponent` | `displayType="area"/"line"`, `valueMemberPath` |
+| Pie/donut chart | `IgxPieChartComponent` / `IgxDoughnutChartComponent` | `valueMemberPath`, `labelMemberPath` |
+| Financial chart | `IgxFinancialChartComponent` | OHLC/candlestick data |
+| Complex multi-series | `IgxDataChartComponent` | Multiple series + axes |
+
+## Data Display Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Item list | `IgxListComponent` + `IgxListItemComponent` | `igxListLine`, `igxListThumbnail`, `igxListAction` |
+| User avatar | `IgxAvatarComponent` | `[initials]`, `shape="circle"`, `size` |
+| Status badge | `IgxBadgeComponent` | `[value]`, `type` |
+| Icons | `IgxIconComponent` | Material Icons by default |
+| Progress bar | `IgxLinearProgressBarComponent` | `[value]`, `[max]` |
+| Circular progress | `IgxCircularProgressBarComponent` | `[value]`, `[max]` |
+| Data grid | `IgxGridComponent` | Full-featured data grid (Premium) |
+
+## Map Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| World map | `IgxGeographicMapComponent` | `[zoomable]`, `backgroundContent` |
+| Map markers | `IgxGeographicSymbolSeriesComponent` | `latitudeMemberPath`, `longitudeMemberPath`, `markerType`, `markerBrush` |
+| Bubble overlay | `IgxGeographicProportionalSymbolSeriesComponent` | Sized markers |
+| Shape regions | `IgxGeographicShapeSeriesComponent` | Polygon rendering |
+
+## Gauge Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Linear gauge | `IgxLinearGaugeComponent` | `[value]`, `[minimumValue]`, `[maximumValue]`, `[needleBrush]` |
+| Radial gauge | `IgxRadialGaugeComponent` | `[value]`, `[minimumValue]`, `[maximumValue]` |
+| Bullet graph | `IgxBulletGraphComponent` | Performance vs target |
+
+## Package Requirements
+
+The main `@infragistics/igniteui-angular` package contains core UI components (list, avatar, navbar, drawer, card, badge, progress, icon, etc.).
+
+Premium data visualization components require **additional packages**:
+
+```
+npm install --save igniteui-angular-core igniteui-angular-charts igniteui-angular-maps igniteui-angular-gauges
+```
+
+These are bare-name packages (not `@infragistics/` scoped). They resolve from the public npm registry.
+
+## Import Patterns
+
+**Core UI components** - import as standalone components:
+```typescript
+import { IgxNavbarComponent, IgxAvatarComponent } from '@infragistics/igniteui-angular';
+```
+
+**DV components** - import as NgModules (they work in standalone `imports` arrays):
+```typescript
+import { IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { IgxSparklineModule } from 'igniteui-angular-charts';
+import { IgxGeographicMapModule } from 'igniteui-angular-maps';
+import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
+```
+
+**Map series** - import component classes for programmatic use:
+```typescript
+import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
+import { MarkerType } from 'igniteui-angular-charts';
+```

skills/igniteui-angular-from-design/references/gotchas.md

@@ -0,0 +1,161 @@
+# Ignite UI Angular Gotchas & Pitfalls
+
+## Table of Contents
+- [Sass Conflicts](#sass-conflicts)
+- [Chart Properties](#chart-properties)
+- [Component Properties](#component-properties)
+- [Theming Pitfalls](#theming-pitfalls)
+- [Map Component](#map-component)
+- [Dark Theme Specifics](#dark-theme-specifics)
+
+## Sass Conflicts
+
+### `contrast()` function collision
+The CSS `contrast()` filter function collides with `igniteui-theming`'s `contrast()` Sass function. Workaround:
+```scss
+// BAD - Sass intercepts this
+filter: contrast(1.2);
+
+// GOOD - escape to CSS
+filter: #{unquote("contrast(1.2)")};
+```
+
+### Font family in typography mixin
+Comma-separated font families are parsed as multiple Sass arguments. Wrap in parentheses:
+```scss
+// BAD
+@include typography($font-family: "Titillium Web", "Segoe UI", sans-serif);
+
+// GOOD
+@include typography($font-family: ("Titillium Web", "Segoe UI", sans-serif));
+```
+
+## Chart Properties
+
+### Markers shown by default
+Category charts show markers at every data point by default. Hide them:
+```html
+[markerTypes]="'none'"
+```
+
+### `plotAreaBackground` does NOT exist on `igx-category-chart`
+Use CSS to style the chart container background instead.
+
+### `areaFillOpacity` exists on `IgxCategoryChartComponent` (via domain chart parent)
+It does NOT exist on `IgxSparklineComponent`.
+
+### Smooth area charts
+For smooth-looking area charts like dense dashboards:
+- Use 300-500+ data points
+- Use exponential smoothing in data generation: `prev = prev * 0.95 + target * 0.05`
+- Set `[markerTypes]="'none'"` to hide dots
+- Set `[areaFillOpacity]` between 0.3-0.5
+- Use `[xAxisInterval]` to reduce label density
+
+## Component Properties
+
+### `roundShape` does NOT exist on `IgxAvatarComponent`
+Use `shape="circle"` alone. Do not add `[roundShape]="true"`.
+
+### `IgxListLineDirective` is the directive for `igxListLine`
+Must be imported for list item text content:
+```typescript
+import { IgxListLineDirective } from '@infragistics/igniteui-angular';
+```
+
+### Avatar background color via CSS variable
+```html
+<igx-avatar [style.--ig-avatar-background]="color"></igx-avatar>
+```
+
+## Theming Pitfalls
+
+### DV components do NOT inherit Sass theme colors
+Charts, maps, gauges, and sparklines ignore the global Sass dark theme. Set all visual properties explicitly via component inputs:
+```html
+[brushes]="'rgba(0, 188, 212, 0.6)'"
+[outlines]="'#00bcd4'"
+[xAxisLabelTextColor]="'#8892a4'"
+[yAxisMajorStroke]="'rgba(0, 188, 212, 0.08)'"
+```
+
+### Component theme functions
+Use the component-specific theme functions for core UI:
+```scss
+$custom-navbar: navbar-theme($background: #0d1b33);
+$custom-drawer: navdrawer-theme($background: #0d1b33);
+$custom-list: list-theme($background: transparent);
+```
+Apply with the corresponding mixin inside `::ng-deep`:
+```scss
+:host ::ng-deep igx-navbar {
+  @include navbar($custom-navbar);
+}
+```
+
+### Nav drawer width
+Override the drawer aside width via its internal class:
+```scss
+:host ::ng-deep igx-nav-drawer {
+  .igx-nav-drawer__aside {
+    width: 200px;
+  }
+}
+```
+
+## Map Component
+
+### Adding markers programmatically
+The geographic map requires programmatic series setup in `ngAfterViewInit`:
+```typescript
+const symbolSeries = new IgxGeographicSymbolSeriesComponent();
+symbolSeries.dataSource = locations;
+symbolSeries.latitudeMemberPath = 'lat';
+symbolSeries.longitudeMemberPath = 'lon';
+symbolSeries.markerType = MarkerType.Circle;
+symbolSeries.markerBrush = '#00bcd4';
+symbolSeries.markerOutline = '#00bcd4';
+map.series.add(symbolSeries);
+map.zoomToGeographic({ left: -130, top: -50, width: 310, height: 130 });
+```
+
+### Dark map styling
+OpenStreetMap tiles are light by default. For dark themes, apply a CSS filter to the container:
+```scss
+.map-container {
+  filter: grayscale(0.6) brightness(0.7);
+}
+```
+
+## Dark Theme Specifics
+
+### Use `$dark-material-schema` for dark themes
+```scss
+@include theme(
+  $palette: $my-palette,
+  $schema: $dark-material-schema
+);
+```
+
+### CSS custom properties for cyberpunk/dark panels
+Define reusable panel tokens:
+```scss
+:root {
+  --panel-bg: rgba(13, 27, 51, 0.85);
+  --panel-border: rgba(0, 188, 212, 0.15);
+  --accent: #00bcd4;
+  --text: #e0e6ed;
+  --text-muted: #8892a4;
+}
+```
+
+### Glow border effect
+```scss
+.panel::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
+}
+```