Implementing a React View from a Design Image

React only — pass platform: 'react' / framework: 'react' to every MCP call.

Order of work

1. Read the image. Identify every region, its component, and the layout structure.
2. Inspect the app. Existing theme imports, design system, palette overrides, installed packages.
3. Look up the components you chose before writing them — get_doc, get_api_reference.
4. Theme — global layer only if the app has none, then per-component tokens.
5. Implement the layout, mock data, and view.
6. Validate — build, run, compare with the image, iterate.

Steps 3 and 4 use MCP servers where available; both are optional. Without them, read the installed .d.ts files (node_modules/igniteui-webcomponents/components/<name>/) for props, @slot, @csspart, and @cssproperty names, and theme with the palette shades documented in igniteui-react-customize-theme.

1. Read the image

Record, per region: layout role and proportions, component type, colors, type scale, borders/radius/shadow, data shape, and spacing rhythm.