igniteui-react-generate-from-image-design

Covers building a React view from a design image (screenshot, mockup, or wireframe) with Ignite UI for React components and generated theme tokens, using the igniteui-cli and igniteui-theming MCP servers when available. WHEN TO USE: the user supplies an image and asks to implement this design, build this UI, convert this mockup, or create a page from this screenshot in an Ignite UI for React project. WHEN NOT TO USE: no image is provided and the user only needs a component recommendation (use igniteui-react-components), the task is only theming or restyling existing views (use igniteui-react-customize-theme), or the task is reducing bundle size (use igniteui-react-optimize-bundle-size).

설치로 이동 파일 검토

저장소: IgniteUI/igniteui-react
최근 소스 활동: 2026년 9월 28일 06:27
감지된 SKILL.md 언어: 영어
스타: 56
포크: 4

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/IgniteUI/igniteui-react/tree/master/skills/igniteui-react-generate-from-image-design.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/IgniteUI/igniteui-react --skill igniteui-react-generate-from-image-design

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

2 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

name

igniteui-react-generate-from-image-design

description

검색으로 돌아가기 설치로 돌아가기

skill-authoring

Provides rules for writing or updating a SKILL.md in this repository: frontmatter validation for license, name and description, the WHEN TO USE and WHEN NOT TO USE description format, the 500-line body budget with progressive disclosure into reference files, and the extra constraints on public skills that ship in the igniteui-react package. WHEN TO USE: creating a new skill under .agents/skills/ or skills/, or editing an existing skill's frontmatter, scope, length, or links. WHEN NOT TO USE: building an app with Ignite UI for React (use the public igniteui-react-* skills in skills/), changing the wrapper generators, entry points, or tests (see .agents/context/project.md), or changing the contribution rules themselves (edit .github/CONTRIBUTING.md).

2026-09-28

igniteui-react-components

Covers choosing, installing, and using Ignite UI for React (Igr*) components: package routing, theme CSS, JSX and slots, events, refs, forms, TypeScript, charts, gauges, maps, and grids. WHEN TO USE: choosing a component for a UI pattern, setting up igniteui-react in a React or Next.js app, writing Igr* JSX, wiring events, refs, or forms, looking up component APIs through the igniteui-cli MCP server, or debugging components that render unstyled, invisible, or with broken icons. WHEN NOT TO USE: brand colors, dark mode, or component token overrides (use igniteui-react-customize-theme), reducing bundle size or lazy loading (use igniteui-react-optimize-bundle-size), building a view from a screenshot or mockup (use igniteui-react-generate-from-image-design), or moving from Grid Lite to the premium grid (use igniteui-react-migrate-grid-lite-to-premium).

2026-09-28

igniteui-react-customize-theme

Covers theming Ignite UI for React with CSS custom properties: brand palette, dark mode, size, spacing and roundness, per-component tokens, and scoped themes, optionally through the igniteui-theming MCP server. WHEN TO USE: applying brand colors, switching between light and dark, changing a component's appearance (grid headers, buttons, avatars), setting up the igniteui-theming MCP server, or fixing theme overrides that do not take effect. WHEN NOT TO USE: choosing components or adding the initial theme CSS import (use igniteui-react-components), building a whole view from a design image (use igniteui-react-generate-from-image-design, which includes theming), or styling elements that are not Ignite UI components.

2026-09-28

이 저장소의 모든 Skills 보기

igniteui-react-generate-from-image-design

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills