Skip to content

Commit 5efeacd

Browse files
dkalinovInfradkalinovInfra
committed
(feat): New skill for generating apps/views from image
1 parent 34c7910 commit 5efeacd

3 files changed

Lines changed: 371 additions & 0 deletions

File tree

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
name: igniteui-from-design
3+
description: >
4+
Implement Angular application views from design images using Ignite UI Angular components.
5+
Uses MCP servers (igniteui, igniteui-theming, angular-cli) to discover components, generate
6+
themes, and follow best practices. Triggers when the user provides a design image (screenshot,
7+
mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components.
8+
Also triggers when the user asks to "implement this design", "build this UI", "convert this
9+
mockup", or "create a page from this image" in an Ignite UI Angular project.
10+
---
11+
12+
# Implementing Ignite UI Angular Views from Design Images
13+
14+
## Workflow
15+
16+
1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure, colors, and data patterns
17+
2. **Detect platform** - Call `mcp__igniteui-theming__detect_platform` to confirm Angular + licensed status
18+
3. **Discover components** - Call `mcp__igniteui__list_components` with targeted filters to find matching components for each UI pattern
19+
4. **Look up component docs** - Call `mcp__igniteui__get_doc` for unfamiliar components to learn their API
20+
5. **Get best practices** - Call `mcp__angular-cli__get_best_practices` with the workspace path
21+
6. **Generate theme** - Call `mcp__igniteui-theming__create_theme` (or `create_palette`) with colors extracted from the design
22+
7. **Install packages** - Install any additional DV packages needed (charts, maps, gauges)
23+
8. **Implement** - Build the app shell, data layer, and view components
24+
9. **Iterate** - Compare output vs design image, fix visual differences
25+
26+
## Step 1: Analyze the Design Image
27+
28+
Read the input image carefully. For each visual section, identify:
29+
30+
- **Layout structure**: grid rows/columns, sidebar, navbar, content area proportions
31+
- **Component type**: chart, list, card, map, gauge, table, form, etc.
32+
- **Color palette**: primary, secondary, surface/background, accent, text colors
33+
- **Typography**: font sizes, weights, letter-spacing patterns
34+
- **Data patterns**: what mock data is needed (time series, lists, KPIs, geographic)
35+
36+
## Step 2-3: Use MCP Tools for Discovery
37+
38+
Call `mcp__igniteui-theming__detect_platform` first to confirm the project setup.
39+
40+
Then call `mcp__igniteui__list_components` with `framework: "angular"` and relevant filters to find components matching each UI pattern. Common filters:
41+
42+
- `chart`, `sparkline` - for data visualization
43+
- `list`, `card`, `avatar`, `badge` - for data display
44+
- `nav`, `navbar`, `drawer` - for navigation
45+
- `progress`, `gauge` - for metrics
46+
- `map` - for geographic displays
47+
- `grid` - for tabular data
48+
49+
For component-to-Ignite-UI mapping, see [references/component-mapping.md](references/component-mapping.md).
50+
51+
## Step 4: Look Up Component API
52+
53+
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.
54+
55+
Call `mcp__igniteui__search_docs` for feature-based questions (e.g., "how to style area chart dark theme").
56+
57+
## Step 5: Generate Theme with MCP
58+
59+
Extract colors from the design image, then call:
60+
61+
```
62+
mcp__igniteui-theming__create_theme({
63+
primaryColor: "<extracted primary>",
64+
secondaryColor: "<extracted secondary>",
65+
surfaceColor: "<extracted background>",
66+
variant: "dark" or "light",
67+
platform: "angular",
68+
licensed: true/false,
69+
fontFamily: "<extracted font>",
70+
designSystem: "material"
71+
})
72+
```
73+
74+
Use `create_palette` instead if only the palette needs customization. Use `create_component_theme` for per-component overrides (navbar, drawer, list backgrounds).
75+
76+
## Step 6: Install DV Packages
77+
78+
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.
79+
80+
## Step 7: Implement
81+
82+
### Structure
83+
84+
- **App shell**: navbar + nav drawer + router-outlet in root component
85+
- **Data layer**: interfaces in `models/`, injectable service with mock data in `services/`
86+
- **View**: CSS Grid layout with panel sections in the routed component
87+
88+
### Key Implementation Rules
89+
90+
- Use Angular project conventions from `CLAUDE.md` / `AGENTS.md` (standalone components, OnPush, signals, `@if`/`@for`, `inject()`)
91+
- Set all DV component colors explicitly via inputs — they do NOT inherit the Sass theme
92+
- For dark themes, use `$dark-material-schema` and define CSS custom properties for panel styling
93+
- Use `::ng-deep` with component theme mixins (`navbar-theme`, `navdrawer-theme`, `list-theme`) for core UI dark styling
94+
95+
### Common Pitfalls
96+
97+
Consult [references/gotchas.md](references/gotchas.md) for known issues including:
98+
- Sass function name collisions (`contrast()`)
99+
- Font family syntax in typography mixin
100+
- Chart marker visibility, missing properties
101+
- Avatar/component property mismatches
102+
- Map dark styling and programmatic series setup
103+
104+
## Step 8: Iterate on Visual Fidelity
105+
106+
After the first build, compare the output screenshot against the original design. Common fixes:
107+
108+
- **Chart too spiky**: increase data points (300-500), use exponential smoothing, set `[markerTypes]="'none'"`
109+
- **Map too dark/light**: adjust CSS filter values (`grayscale`, `brightness`, `saturate`)
110+
- **Panel proportions wrong**: adjust CSS Grid `grid-template-columns` ratios
111+
- **Missing content sections**: re-examine the original design for overlooked elements
112+
- **Nav drawer in wrong mode**: remove `igxDrawerMini` template if full mode is needed, or vice versa
113+
114+
Rebuild, take a new screenshot, and compare again until satisfied.

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Ignite UI Angular Component Mapping Reference
2+
3+
## Table of Contents
4+
- [Dashboard & Layout Components](#dashboard--layout-components)
5+
- [Chart Components](#chart-components)
6+
- [Data Display Components](#data-display-components)
7+
- [Map Components](#map-components)
8+
- [Gauge Components](#gauge-components)
9+
- [Package Requirements](#package-requirements)
10+
- [Import Patterns](#import-patterns)
11+
12+
## Dashboard & Layout Components
13+
14+
| UI Pattern | Ignite UI Component | Key Properties |
15+
|---|---|---|
16+
| Top navigation bar | `IgxNavbarComponent` | `igxNavbarAction`, `igxNavbarTitle` |
17+
| Side navigation | `IgxNavigationDrawerComponent` | `[pin]`, `[pinThreshold]`, `igxDrawer` template, `igxDrawerMini` template |
18+
| Content cards/panels | `IgxCardComponent` | `igxCardHeader`, `igxCardContent`, `igxCardActions` |
19+
| Tabbed content | `IgxBottomNavComponent` or `IgxTabsComponent` | Panel-based or router-based |
20+
| Accordion sections | `IgxAccordionComponent` | `IgxExpansionPanelComponent` children |
21+
| Split layouts | `IgxSplitterComponent` | Horizontal/vertical panes |
22+
| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) |
23+
24+
## Chart Components
25+
26+
| UI Pattern | Ignite UI Component | Key Properties |
27+
|---|---|---|
28+
| Area chart | `IgxCategoryChartComponent` | `chartType="area"`, `[markerTypes]="'none'"`, `[areaFillOpacity]` |
29+
| Line chart | `IgxCategoryChartComponent` | `chartType="line"` |
30+
| Column/bar chart | `IgxCategoryChartComponent` | `chartType="column"` |
31+
| Sparkline (mini chart) | `IgxSparklineComponent` | `displayType="area"/"line"`, `valueMemberPath` |
32+
| Pie/donut chart | `IgxPieChartComponent` / `IgxDoughnutChartComponent` | `valueMemberPath`, `labelMemberPath` |
33+
| Financial chart | `IgxFinancialChartComponent` | OHLC/candlestick data |
34+
| Complex multi-series | `IgxDataChartComponent` | Multiple series + axes |
35+
36+
## Data Display Components
37+
38+
| UI Pattern | Ignite UI Component | Key Properties |
39+
|---|---|---|
40+
| Item list | `IgxListComponent` + `IgxListItemComponent` | `igxListLine`, `igxListThumbnail`, `igxListAction` |
41+
| User avatar | `IgxAvatarComponent` | `[initials]`, `shape="circle"`, `size` |
42+
| Status badge | `IgxBadgeComponent` | `[value]`, `type` |
43+
| Icons | `IgxIconComponent` | Material Icons by default |
44+
| Progress bar | `IgxLinearProgressBarComponent` | `[value]`, `[max]` |
45+
| Circular progress | `IgxCircularProgressBarComponent` | `[value]`, `[max]` |
46+
| Data grid | `IgxGridComponent` | Full-featured data grid (Premium) |
47+
48+
## Map Components
49+
50+
| UI Pattern | Ignite UI Component | Key Properties |
51+
|---|---|---|
52+
| World map | `IgxGeographicMapComponent` | `[zoomable]`, `backgroundContent` |
53+
| Map markers | `IgxGeographicSymbolSeriesComponent` | `latitudeMemberPath`, `longitudeMemberPath`, `markerType`, `markerBrush` |
54+
| Bubble overlay | `IgxGeographicProportionalSymbolSeriesComponent` | Sized markers |
55+
| Shape regions | `IgxGeographicShapeSeriesComponent` | Polygon rendering |
56+
57+
## Gauge Components
58+
59+
| UI Pattern | Ignite UI Component | Key Properties |
60+
|---|---|---|
61+
| Linear gauge | `IgxLinearGaugeComponent` | `[value]`, `[minimumValue]`, `[maximumValue]`, `[needleBrush]` |
62+
| Radial gauge | `IgxRadialGaugeComponent` | `[value]`, `[minimumValue]`, `[maximumValue]` |
63+
| Bullet graph | `IgxBulletGraphComponent` | Performance vs target |
64+
65+
## Package Requirements
66+
67+
The main `@infragistics/igniteui-angular` package contains core UI components (list, avatar, navbar, drawer, card, badge, progress, icon, etc.).
68+
69+
Premium data visualization components require **additional packages**:
70+
71+
```
72+
npm install --save igniteui-angular-core igniteui-angular-charts igniteui-angular-maps igniteui-angular-gauges
73+
```
74+
75+
These are bare-name packages (not `@infragistics/` scoped). They resolve from the public npm registry.
76+
77+
## Import Patterns
78+
79+
**Core UI components** - import as standalone components:
80+
```typescript
81+
import { IgxNavbarComponent, IgxAvatarComponent } from '@infragistics/igniteui-angular';
82+
```
83+
84+
**DV components** - import as NgModules (they work in standalone `imports` arrays):
85+
```typescript
86+
import { IgxCategoryChartModule } from 'igniteui-angular-charts';
87+
import { IgxSparklineModule } from 'igniteui-angular-charts';
88+
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
89+
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
90+
```
91+
92+
**Map series** - import component classes for programmatic use:
93+
```typescript
94+
import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
95+
import { MarkerType } from 'igniteui-angular-charts';
96+
```

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

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# Ignite UI Angular Gotchas & Pitfalls
2+
3+
## Table of Contents
4+
- [Sass Conflicts](#sass-conflicts)
5+
- [Chart Properties](#chart-properties)
6+
- [Component Properties](#component-properties)
7+
- [Theming Pitfalls](#theming-pitfalls)
8+
- [Map Component](#map-component)
9+
- [Dark Theme Specifics](#dark-theme-specifics)
10+
11+
## Sass Conflicts
12+
13+
### `contrast()` function collision
14+
The CSS `contrast()` filter function collides with `igniteui-theming`'s `contrast()` Sass function. Workaround:
15+
```scss
16+
// BAD - Sass intercepts this
17+
filter: contrast(1.2);
18+
19+
// GOOD - escape to CSS
20+
filter: #{unquote("contrast(1.2)")};
21+
```
22+
23+
### Font family in typography mixin
24+
Comma-separated font families are parsed as multiple Sass arguments. Wrap in parentheses:
25+
```scss
26+
// BAD
27+
@include typography($font-family: "Titillium Web", "Segoe UI", sans-serif);
28+
29+
// GOOD
30+
@include typography($font-family: ("Titillium Web", "Segoe UI", sans-serif));
31+
```
32+
33+
## Chart Properties
34+
35+
### Markers shown by default
36+
Category charts show markers at every data point by default. Hide them:
37+
```html
38+
[markerTypes]="'none'"
39+
```
40+
41+
### `plotAreaBackground` does NOT exist on `igx-category-chart`
42+
Use CSS to style the chart container background instead.
43+
44+
### `areaFillOpacity` exists on `IgxCategoryChartComponent` (via domain chart parent)
45+
It does NOT exist on `IgxSparklineComponent`.
46+
47+
### Smooth area charts
48+
For smooth-looking area charts like dense dashboards:
49+
- Use 300-500+ data points
50+
- Use exponential smoothing in data generation: `prev = prev * 0.95 + target * 0.05`
51+
- Set `[markerTypes]="'none'"` to hide dots
52+
- Set `[areaFillOpacity]` between 0.3-0.5
53+
- Use `[xAxisInterval]` to reduce label density
54+
55+
## Component Properties
56+
57+
### `roundShape` does NOT exist on `IgxAvatarComponent`
58+
Use `shape="circle"` alone. Do not add `[roundShape]="true"`.
59+
60+
### `IgxListLineDirective` is the directive for `igxListLine`
61+
Must be imported for list item text content:
62+
```typescript
63+
import { IgxListLineDirective } from '@infragistics/igniteui-angular';
64+
```
65+
66+
### Avatar background color via CSS variable
67+
```html
68+
<igx-avatar [style.--ig-avatar-background]="color"></igx-avatar>
69+
```
70+
71+
## Theming Pitfalls
72+
73+
### DV components do NOT inherit Sass theme colors
74+
Charts, maps, gauges, and sparklines ignore the global Sass dark theme. Set all visual properties explicitly via component inputs:
75+
```html
76+
[brushes]="'rgba(0, 188, 212, 0.6)'"
77+
[outlines]="'#00bcd4'"
78+
[xAxisLabelTextColor]="'#8892a4'"
79+
[yAxisMajorStroke]="'rgba(0, 188, 212, 0.08)'"
80+
```
81+
82+
### Component theme functions
83+
Use the component-specific theme functions for core UI:
84+
```scss
85+
$custom-navbar: navbar-theme($background: #0d1b33);
86+
$custom-drawer: navdrawer-theme($background: #0d1b33);
87+
$custom-list: list-theme($background: transparent);
88+
```
89+
Apply with the corresponding mixin inside `::ng-deep`:
90+
```scss
91+
:host ::ng-deep igx-navbar {
92+
@include navbar($custom-navbar);
93+
}
94+
```
95+
96+
### Nav drawer width
97+
Override the drawer aside width via its internal class:
98+
```scss
99+
:host ::ng-deep igx-nav-drawer {
100+
.igx-nav-drawer__aside {
101+
width: 200px;
102+
}
103+
}
104+
```
105+
106+
## Map Component
107+
108+
### Adding markers programmatically
109+
The geographic map requires programmatic series setup in `ngAfterViewInit`:
110+
```typescript
111+
const symbolSeries = new IgxGeographicSymbolSeriesComponent();
112+
symbolSeries.dataSource = locations;
113+
symbolSeries.latitudeMemberPath = 'lat';
114+
symbolSeries.longitudeMemberPath = 'lon';
115+
symbolSeries.markerType = MarkerType.Circle;
116+
symbolSeries.markerBrush = '#00bcd4';
117+
symbolSeries.markerOutline = '#00bcd4';
118+
map.series.add(symbolSeries);
119+
map.zoomToGeographic({ left: -130, top: -50, width: 310, height: 130 });
120+
```
121+
122+
### Dark map styling
123+
OpenStreetMap tiles are light by default. For dark themes, apply a CSS filter to the container:
124+
```scss
125+
.map-container {
126+
filter: grayscale(0.6) brightness(0.7);
127+
}
128+
```
129+
130+
## Dark Theme Specifics
131+
132+
### Use `$dark-material-schema` for dark themes
133+
```scss
134+
@include theme(
135+
$palette: $my-palette,
136+
$schema: $dark-material-schema
137+
);
138+
```
139+
140+
### CSS custom properties for cyberpunk/dark panels
141+
Define reusable panel tokens:
142+
```scss
143+
:root {
144+
--panel-bg: rgba(13, 27, 51, 0.85);
145+
--panel-border: rgba(0, 188, 212, 0.15);
146+
--accent: #00bcd4;
147+
--text: #e0e6ed;
148+
--text-muted: #8892a4;
149+
}
150+
```
151+
152+
### Glow border effect
153+
```scss
154+
.panel::before {
155+
content: '';
156+
position: absolute;
157+
top: 0; left: 0; right: 0;
158+
height: 2px;
159+
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
160+
}
161+
```

0 commit comments

Comments
 (0)