fix(skills): split figma-to-app and correct it against Figma, theming and WC APIs

[simeonoff]

Description

Updates the igniteui-wc-figma-to-app skill so it works with Figma designs built from any UI kit, not just the Indigo.Design UI Kits. It also corrects claims that did not match Figma's docs, the theming MCP, or the component source.

Designs from any kit

• Every component is classified into one of three tiers:
  • A: Indigo.Design kits, mapped by layer name.
  • B: other component libraries, normalized to canonical roles.
  • C: plain frames, inferred and confirmed with the user.
• For Tier B/C designs, the theme is fitted to the closest design system:
  • palette seeds are taken from the colors the design actually uses
  • per-component radius tokens
  • --ig-size per component family
  • type-style overrides
• Remaining structural differences are recorded as anatomy deltas for the user to approve.

Skill structure

• The skill exceeded both authoring limits: a 1,112-character description and a 1,012-line body.
• Project setup, Figma exploration and theme generation now live in references/, mirroring the Angular skill.
• The description is now 684 characters and the body 481 lines.

Figma

• Replaced the non-existent @figma/mcp package with Figma's two official servers:
  • desktop: 127.0.0.1:3845, no token
  • remote: mcp.figma.com, OAuth
• The desktop server supports link-based nodeIds; the old "nodeId is ignored" claim was wrong.
• get_variable_defs is called per page, because it only covers the node you pass.
• Rate limits now match Figma's published table.
• The personal access token is only used for the REST API.

Theming (checked against igniteui-theming 29.0.0 by running the MCP and compiling Sass)

• create_typography accepts customScale but ignores it. Type styles and button casing now use --ig-<style>-<property> overrides.
• create_component_theme defaults to Material light, so designSystem and variant are always passed.
• The theme check now reads index.html, where the CLI scaffold puts its theme <link>.
• Runtime light/dark switching needs both a stylesheet swap and configureTheme().

Component API corrections (checked against the source and CLI 15.7.0)

• Nav drawer width uses the --ig-nav-drawer-size / --ig-nav-drawer-size--mini tokens. --menu-* does not exist; this is also fixed in igniteui-wc-generate-from-image-design.
• The mask input attribute is prompt, not prompt-char.
• The dock manager registers with defineComponents.
• igc-action-strip exists in the grids package.
• Chart brush properties differ per chart type.
• Grid Lite registration is now documented.

Validation

• Two Playwright snippets called an undefined helper, and five could not see into shadow roots.
• Clearer severity rules: a visibly wrong color is Major, and "Accepted" requires the user's approval.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update

Testing

This changes skill docs only; no library code.

• Ran the igniteui-theming 29.0.0 MCP server locally for create_theme, create_typography, create_custom_palette and create_component_theme, and compiled Sass to confirm the typography variables and palette override order.
• Checked component claims against src/ and the published grids, charts and dockmanager packages.
• Checked the scaffold claims against the igniteui-cli 15.7.0 templates, and the Figma claims against developers.figma.com.
• Checked every relative link, anchor and cross-reference, table column counts, and that each Playwright snippet parses as JavaScript with its helpers defined.

Checklist

• My code follows the project's coding standards
• I have updated documentation if needed

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved moderate theming, quota, and validation findings remain.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

• Avoid hanging on undefined custom elements during audit · New

What changed in this PR

Refactors the Ignite UI Web Components Figma-to-app skill for broader design-system support and corrected Figma, theming, API, and validation guidance.

Changes:

• Splits detailed workflows into focused reference files.
• Adds Tier A/B/C design classification and token fitting.
• Corrects MCP, theming, component, asset, and validation documentation.

File	Summary and final findings
skills/​igniteui-wc-generate-from-image-design/​references/​gotchas.md	Corrects nav drawer token guidance.
skills/​igniteui-wc-figma-to-app/​SKILL.md	Streamlines the workflow and links reference guides.
skills/​igniteui-wc-figma-to-app/​references/​validation-patterns.md	Updates validation audits; moderate findings concern empty brush arrays (1 vote) and hanging on undefined elements (2 votes).
skills/​igniteui-wc-figma-to-app/​references/​theme-generation.md	Adds theme-generation guidance; findings cover scoped themes (nit, 1 vote), variant switching (moderate, 1 vote), CSS ordering (nit, 1 vote), and unconditionally global palette/type overrides (moderate, 1 vote each).
skills/​igniteui-wc-figma-to-app/​references/​project-setup.md	Documents project detection and scaffolding.
skills/​igniteui-wc-figma-to-app/​references/​mcp-setup.md	Documents official Figma MCP setup; correct the playwright_browser_evaluate troubleshooting key (nit, 1 vote).
skills/​igniteui-wc-figma-to-app/​references/​figma-exploration.md	Documents Figma exploration; clarify page-dependent call budgeting (moderate, 1 vote).
skills/​igniteui-wc-figma-to-app/​references/​figma-component-map.md	Corrects component and registration mappings.
skills/​igniteui-wc-figma-to-app/​references/​design-token-bridge.md	Defines token fitting; findings cover scoped themes (nit, 1 vote) and non-class-scoped theme stylesheets (moderate, 1 vote).
skills/​igniteui-wc-figma-to-app/​references/​design-provenance.md	Clarifies provenance guidance.
skills/​igniteui-wc-figma-to-app/​references/​asset-extraction.md	Updates asset extraction; distinguish original downloads from reduced-quality renders (nit, 1 vote).

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[kdinev]

Combine the multi-line paragraphs to not be split by line character limit

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved critical tool-name errors and additional theming and validation issues block approval.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 2

Open (2)

• Replace nonexistent prefixed theming tool names · New
• Rename invalid prefixed Theming MCP tool calls · New

Resolved since last review (1)

• Avoid hanging on undefined custom elements during audit

Previously missed (1)

In code that hasn't changed since last review

Detect empty brush arrays as unassigned

skills/​igniteui-wc-figma-to-app/​references/​validation-patterns.md:205

The audit cannot detect the empty-brush case described immediately below: [] satisfies both el[p] != null and el[p] !== '', so assigned() reports ['brushes'] even when no series colors were assigned. This makes the mandatory audit pass a chart that is still using its default palette; test array length when deciding whether a brush property is assigned.

[Copilot]

Copilot review overview

🔵 Needs a closer look

Unresolved moderate issues remain in chart validation and scoped theme guidance.

Review effort: Lite
Findings: 2

Open (2)

• Rename invalid prefixed Theming MCP tool calls
• Replace nonexistent prefixed theming tool names

Previously missed (1)

In code that hasn't changed since last review

Treat empty brush arrays as unassigned

skills/​igniteui-wc-figma-to-app/​references/​validation-patterns.md:205

The audit cannot detect an empty brush array as described: [] != null && [] !== '' is true, so assigned() reports ['brushes'] even when no colors are set. This makes the mandatory series-color check pass for an unconfigured chart. Treat array-valued brush properties as assigned only when they have at least one entry (while retaining the scalar check for brush on sparklines).

[Copilot]

Copilot review overview

🟡 Changes recommended

Moderate validation and project-detection issues remain unresolved.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

• Dock-manager theming guidance is contradictory · New

Resolved since last review (2)

• Rename invalid prefixed Theming MCP tool calls
• Replace nonexistent prefixed theming tool names

[Copilot]

Copilot review overview

🔵 Needs a closer look

Five moderate and three nit findings remain unresolved.

Review effort: Lite
Findings: None

Resolved since last review (1)

• Dock-manager theming guidance is contradictory

Previously missed (1)

In code that hasn't changed since last review

Require non-empty brush and outline values

skills/​igniteui-wc-figma-to-app/​references/​validation-patterns.md:181

The inline assigned predicate treats an empty array as assigned because [] !== '' is true. Thus a chart with an empty brushes/outlines collection can be reported as having brush colors, allowing the default palette to pass an audit that the next paragraph says should fail. Check array length (and non-empty scalar values) before reporting a brush property.