[desig9stein]

Description

Provide a clear and concise summary of the changes in this PR and the motivation behind them

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that causes existing functionality to change)
• Documentation update
• Refactoring (code improvements without functional changes)

Related Issues

Closes #

Testing

Checklist

• My code follows the project's coding standards
• I have tested my changes locally
• I have updated documentation if needed
• Breaking changes are documented in the description

[Copilot]

🟡 Changes recommended

Unresolved critical credential-handling and moderate workflow, theming, and validation issues remain.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds an end-to-end Figma-to-Ignite UI Web Components workflow with asset extraction, theming, component mapping, MCP setup, and validation guidance.

Changes:

• Adds the igniteui-wc-figma-to-app skill.
• Adds supporting extraction, theming, mapping, MCP, and validation references.
• Registers the skill in the skills README.

File summaries

File	Description
skills/README.md	Registers the new Figma-to-app skill.
skills/igniteui-wc-figma-to-app/SKILL.md	Defines the end-to-end implementation workflow.
skills/igniteui-wc-figma-to-app/references/validation-patterns.md	Provides validation and audit patterns.
skills/igniteui-wc-figma-to-app/references/mcp-setup.md	Documents MCP server configuration.
skills/igniteui-wc-figma-to-app/references/figma-component-map.md	Maps Figma components to Ignite UI controls.
skills/igniteui-wc-figma-to-app/references/design-token-bridge.md	Maps Figma tokens to Ignite UI themes.
skills/igniteui-wc-figma-to-app/references/asset-extraction.md	Documents asset extraction strategies.

Review details

Suppressed comments (11)

skills/igniteui-wc-figma-to-app/SKILL.md:65

• This workflow conflicts with the repository's existing MCP skill protocol: igniteui-wc-customize-component-theme/SKILL.md:24-33 and igniteui-wc-choose-components/SKILL.md:15-25 require the agent to configure an unavailable server automatically and retry, rather than stopping and asking the user to do it. As written, a normal first-time Figma request will halt before the workflow can use the documented setup path.

If **any server fails**, stop and guide the user through setup **for that server only**
before continuing. For `igniteui-cli` and `igniteui-theming`, the fastest path is
`npx -y igniteui-cli ai-config`, which configures both. Full setup instructions for all
servers are in [references/mcp-setup.md](references/mcp-setup.md). Newly configured MCP
servers require an editor/session reload before their tools appear.

skills/igniteui-wc-figma-to-app/SKILL.md:718

• This rule tells the implementation to copy the recorded surface background directly, but the same skill requires no raw hex in view code and the theming bridge says post-palette colors must use palette tokens or semantic variables. Following both rules is impossible for the #222222/#333 surfaces shown in Table B. Require a palette token or named semantic surface variable here, with the Figma value used only to generate/define that variable.

13. **Layout surfaces:** for every entry in the Phase 1g Surfaces table, add a CSS class
    with the recorded `background`, `border-radius`, `padding`, `border`, and `box-shadow`.
    Never leave a section transparent if the Figma surface has a background; never add a
    background to a section that floats on the page background in the design.

skills/igniteui-wc-figma-to-app/SKILL.md:193

• The rate-limit guidance contradicts the mandatory Phase 1c workflow below: Phase 1c requires a separate screenshot for every artboard and says never to skip it, while this item says not to call figma_get_screenshot when get_design_context already returns a screenshot. Following the current ordered phases always makes both calls, so the documented 5-artboard flow still consumes about 18 calls and exceeds the stated Starter quota. Make one response the reference source and adjust the phase order/requirements accordingly.

> 2. `figma_get_design_context` already returns a screenshot — do not also call
>    `figma_get_screenshot` for the same node unless you need a larger `maxDimension`.

skills/igniteui-wc-figma-to-app/SKILL.md:830

• Traversing every shadow root exposes implementation controls from composite Ignite UI elements (for example, the internal button of a date picker or the native button inside a button host), not just the actions represented in the Figma inventory. The rule would therefore classify legitimate component internals as fabricated and tell the agent to remove controls it cannot remove. Compare user-facing component hosts/native app controls, or explicitly exclude controls owned by an igc-* shadow host.

**Action controls audit (mandatory for every page):** count and name all visible action
buttons and toolbar controls, including those inside shadow roots. Compare against the
Phase 1d inventory — any control not recorded in the Figma design context is fabricated and
must be removed.

skills/igniteui-wc-figma-to-app/SKILL.md:615

• The required ?inline import is a Vite-specific asset query, but Phase 0 also allows an existing plain Lit/vanilla project without checking its bundler. Following this instruction in a Rollup, Webpack, or other setup can fail module resolution and prevent the grid from loading. Make the shadow-root theme injection bundler-specific, or gate this example on a detected Vite setup and provide the alternative for other bundlers.

**Grid and chart packages carry their own themes.** The premium grids need
`igniteui-webcomponents-grids/grids/themes/<variant>/<design-system>.css` in addition to
the core theme, and inside a Lit component that CSS must be imported `?inline` and injected
into the shadow root:

```typescript
import gridTheme from 'igniteui-webcomponents-grids/grids/themes/dark/material.css?inline';
// in render(): html`<style>${gridTheme}</style> <igc-grid ...></igc-grid>`

**skills/igniteui-wc-figma-to-app/SKILL.md:161**
* The addressable signature here says `get_metadata` requires `fileKey + nodeId`, but Phase 1a immediately calls it with a file key and no `nodeId` to discover pages. A remote workflow following this document cannot satisfy both instructions; document the actual optionality or use the appropriate file/page discovery call.

| Remote / addressable | get_design_context / get_metadata require fileKey + nodeId | Pass fileKey and nodeId explicitly. You can iterate artboards without the user. |
| Desktop / session-bound | Tools take no required params and act on the current selection | Ask the user to click each frame in Figma before every call. Any nodeId is ignored. |

**skills/igniteui-wc-figma-to-app/SKILL.md:56**
* `0a` runs the Figma probe before `0c` has determined the variant or obtained a file URL. For the addressable server described below, `get_metadata` needs a file key, so a valid server will fail this probe with no key and the workflow will incorrectly enter setup guidance. Detect the variant/collect the URL first, or make the probe conditional.

Server	Verification call	Success signal
Figma	figma_get_metadata (see 0c for the call shape)	Returns page list or node XML

**skills/igniteui-wc-figma-to-app/SKILL.md:474**
* The sibling theming skill requires generated theme changes to be shown as a diff and approved before writing (`skills/igniteui-wc-customize-component-theme/SKILL.md:253`), but this path immediately proceeds with global theme generation when an existing app has a variant mismatch. Following it can overwrite an existing global theme and discard application-specific palette/style choices. Add an explicit approval step and preserve the existing theme when the user declines.

• Theme found, but variant mismatch — if the existing theme is light and the Figma
  design is dark (or vice versa), treat this as a theme change and proceed with 3b–3c.
  A light theme applied to a dark design produces wrong background colors on every
  component and will fail every Phase 5 check.

**skills/igniteui-wc-figma-to-app/references/design-token-bridge.md:33**
* Phase 3 of `SKILL.md` gives explicit user requests highest precedence, but this reference makes library metadata first. A user asking for Fluent while the file metadata says Material will therefore get contradictory outcomes depending on which section the agent follows. Align the precedence in this source of truth before using it to resolve the theme.

1. Library source name — figma_get_design_context / figma_get_metadata may
   reference the source library file name.
2. Variable collection name — figma_get_variable_defs may return collection names
   that include the design system (e.g. Material/color/primary).

**skills/igniteui-wc-figma-to-app/references/validation-patterns.md:184**
* This audit treats every shadow-root `role=button` as a design action and says to remove anything absent from the Figma inventory. Ignite UI components legitimately render internal controls (for example Combo's clear affordance in `src/components/combo/combo.ts:1193-1204`), and the snippet does not filter `[hidden]`, so it will report controls that are neither authored nor visible. Scope the comparison to page-authored controls and filter visibility.

Compare against the Phase 1d inventory. Any control not in the design context output is
fabricated and must be removed. (unlabeled) entries are also an accessibility failure —
icon-only buttons need aria-label.

**skills/igniteui-wc-figma-to-app/references/validation-patterns.md:178**
* The mandatory audit also treats every matching node in the shadow trees as visible, but this selector does not check `hidden`, computed `display`/`visibility`, or its bounding box. Dialog, dropdown, and other closed overlays keep their buttons in the DOM, so hidden controls will inflate the inventory and be reported as fabricated. Filter to actually rendered controls before comparing with the Figma action list.

playwright_browser_evaluate({
function: "() => { const out = []; const walk = (root) => { root.querySelectorAll('igc-button, igc-icon-button, button, [role=button]').forEach(b => out.push((b.textContent || '').trim().replace(/\s+/g, ' ') || b.getAttribute('aria-label') || b.getAttribute('name') || '(unlabeled)')); root.querySelectorAll('*').forEach(el => el.shadowRoot && walk(el.shadowRoot)); }; walk(document); return { count: out.length, controls: out }; }"

- **Files reviewed:** 7/7 changed files
- **Comments generated:** 9
- **Review effort level:** Lite
</details>

---

💡 <a href="/IgniteUI/igniteui-webcomponents/new/master?filename=.github/skills/code-review/SKILL.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add a `code-review` agent skill</a> or configure MCP servers for context-aware, tailored reviews. <a href="https://docs.github.com/copilot/how-tos/use-copilot-agents/request-a-code-review/use-code-review?tool=webui#mcp-servers-and-agent-skills" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn more in the docs.</a>