feat: introduce a skill for figma-to-app implementation

[simeonoff]

Description

Introduces a new AI agent skill — igniteui-angular-figma-to-app — that instructs AI models how to translate Figma app screens designed with the Indigo.Design UI Kits (Material, Fluent, Bootstrap, Indigo variants) into production Angular applications using Ignite UI for Angular components.

The skill orchestrates four MCP servers across a 6-phase workflow:

Phase	MCP server	What happens
0 — Prerequisites	All 4	Verify servers; detect or scaffold project via npx igniteui-cli new
1 — Figma exploration	Figma	Discover artboards, capture reference screenshots, extract design context and variables, identify the active kit variant, extract image/SVG assets via REST API
2 — Component discovery	Ignite UI CLI	Map kit component names to IgxXxx selectors; fetch get_doc for every component before writing code
3 — Theme generation	Ignite UI Theming	Map Figma color/typography variables to palette inputs; run per-component token loop; scope size/spacing adjustments via --ig-size/--ig-spacing
4 — Implementation	—	Section-by-section Angular standalone components, CSS Grid layout
5 — Visual validation	Playwright	Screenshot + browser_evaluate measurement loop against Figma reference; severity-classified corrections

Motivation / Context

There was no structured guidance for AI models working in the Figma → Angular direction. The existing igniteui-angular-generate-from-image-design skill handles static screenshots; this skill targets the structured, token-rich data available from a live Figma file — a fundamentally different and higher-fidelity source. It also closes the feedback loop with automated visual validation against the original design.

Component(s) / Area(s) Affected:

skills/igniteui-angular-figma-to-app

Type of Change (check all that apply):

• Bug fix
• New functionality
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (no functional changes)
• Documentation
• Demos
• CI/CD
• Tests
• Changelog
• Skills/Agents

How Has This Been Tested?

• Unit tests
• Manual testing
• Automated e2e tests

[Copilot]

Pull request overview

Adds a new igniteui-angular-figma-to-app skill that guides AI agents through a structured, multi-phase workflow to translate Indigo.Design-based Figma screens into Ignite UI for Angular implementations, including theming and Playwright-based visual validation.

Changes:

• Introduces the igniteui-angular-figma-to-app skill with a 6-phase, MCP-orchestrated implementation protocol.
• Adds reference docs for MCP setup, component mapping, theming token bridging, asset extraction, and Playwright validation patterns.
• Establishes a decomposition → doc-driven component discovery → theming → implementation → measurement-based validation loop.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
skills/igniteui-angular-figma-to-app/SKILL.md	New end-to-end skill definition and phased workflow for Figma → Angular implementation.
skills/igniteui-angular-figma-to-app/references/validation-patterns.md	Playwright measurement/validation loop patterns and pitfalls.
skills/igniteui-angular-figma-to-app/references/mcp-setup.md	Setup instructions for Figma, Ignite UI CLI, Ignite UI Theming, and Playwright MCP servers.
skills/igniteui-angular-figma-to-app/references/figma-component-map.md	Indigo.Design kit layer names mapped to Ignite UI Angular components and docs keys.
skills/igniteui-angular-figma-to-app/references/design-token-bridge.md	Guidance for translating Figma variables into Ignite UI theming inputs and scoped overrides.
skills/igniteui-angular-figma-to-app/references/asset-extraction.md	High-fidelity asset extraction workflow via Figma REST API, plus Angular usage patterns.