feat(skills): add igniteui-wc-generate-from-image-design skill#2198
feat(skills): add igniteui-wc-generate-from-image-design skill#2198rkaraivanov merged 6 commits intomasterfrom
Conversation
georgianastasov
requested review from
Copilot,
kdinev,
rkaraivanov and
simeonoff
There was a problem hiding this comment.
Pull request overview
Adds a new end-user “skill” that guides agents through implementing Ignite UI Web Components views from screenshots/mockups, including supporting references and indexing it in the skills catalog.
Changes:
- Added the
igniteui-wc-generate-from-image-designskill with an image-to-implementation workflow and theming guidance. - Added Web Components-specific reference docs for component mapping and common gotchas.
- Updated
skills/README.mdto include the new skill in the skills index.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| skills/igniteui-wc-generate-from-image-design/SKILL.md | New skill with the end-to-end workflow for generating a view from a design image. |
| skills/igniteui-wc-generate-from-image-design/references/component-mapping.md | Reference mapping from common UI patterns to Ignite UI Web Components + package guidance. |
| skills/igniteui-wc-generate-from-image-design/references/gotchas.md | Reference list of theming/registration/component pitfalls to avoid during implementation. |
| skills/README.md | Surfaces the new skill in the repo’s skills table and usage examples. |
…nent-mapping.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…as.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
| ```scss | ||
| // BAD | ||
| @include typography($font-family: "Primary Font", "Fallback Font", sans-serif); | ||
|
|
||
| // GOOD | ||
| @include typography($font-family: ("Primary Font", "Fallback Font", sans-serif)); | ||
| ``` |
There was a problem hiding this comment.
Sass is not used in igniteui-webcomponents
There was a problem hiding this comment.
Correct, it's not. Are those skills supposed to work for contributors, or for users of the Ignite UI for Web Components framework?
There was a problem hiding this comment.
@simeonoff They’re intended for users of the Ignite UI for Web Components framework, not contributors. The reason is that they’re designed to work together with the MCP. When a new project is created through the CLI, these skills are added automatically along with the MCP configuration.
| ```scss | ||
| @use 'igniteui-theming' as *; | ||
|
|
||
| $dark-palette: palette( | ||
| $primary: <resolved-primary-color>, | ||
| $secondary: <resolved-secondary-color>, | ||
| $surface: <resolved-surface-color> | ||
| ); | ||
|
|
||
| @include palette($dark-palette, $schema: <resolved-dark-schema>); | ||
| ``` |
There was a problem hiding this comment.
Sass examples should go away in igniteui-webcomponents. Including @simeonoff for confirmation
Description
Adds a new
igniteui-wc-generate-from-image-designskill for building Ignite UI Web Components views from screenshots, mockups, and wireframes.The skill provides a structured image-to-implementation workflow, Web Components-specific component mapping, and focused guidance for theming, package selection, registration, and visual refinement.
Included
igniteui-wc-generate-from-image-designskillcomponent-mapping.mdgotchas.mdWhy
This adds a dedicated workflow for turning design images into working Ignite UI Web Components UI with guidance that is consistent with the repo’s component model and theming approach.
It also makes this workflow easier to discover and reuse for screenshot-to-view tasks across Web Components projects.
Type of Change
Checklist