Agent Skills
› IgniteUI/igniteui-webcomponents
IgniteUI/igniteui-webcomponents
GitHub指导为Lit Web组件添加响应式属性，包括声明、JSDoc文档、测试更新及元数据生成，确保符合编码规范。
Install All Skills
npx skills add IgniteUI/igniteui-webcomponents --all -g -y
Skills in Collection (17)
指导为Lit Web组件添加响应式属性，包括声明、JSDoc文档、测试更新及元数据生成，确保符合编码规范。
需要向现有Web组件添加新属性
修改组件的公共API属性
npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -g -y
用于生成符合项目规范的 Lit Web Component，涵盖规格编写、类创建、样式配置、测试用例及 Storybook 文档脚手架。
需要新建前端组件
初始化 Lit 元素结构
npx skills add IgniteUI/igniteui-webcomponents --skill create-new-component -g -y
提供组件Pull Request的代码审查清单，涵盖结构、公共API、规范准确性、无障碍、行为、样式、测试及构建卫生等维度的检查项。
提交前端组件PR请求代码审查
需要按照标准检查组件代码质量
npx skills add IgniteUI/igniteui-webcomponents --skill review-component-pr -g -y
指导如何按 SCSS 到 Lit CSS 工作流更新组件样式，包括文件定位、使用主题变量、文档化及构建验证。
需要修改组件的布局、大小或结构样式
需要添加或修改读取主题变量的样式
需要为特定主题创建结构性不同的样式
需要添加新的主题颜色或高程变量
npx skills add IgniteUI/igniteui-webcomponents --skill update-component-styles -g -y
为现有 Lit Web Component 添加响应式属性，涵盖装饰器、类型定义、测试、规范更新及文档生成。
为组件添加新属性
修改组件属性配置
npx skills add IgniteUI/igniteui-webcomponents --skill add-component-property -g -y
用于创建符合项目规范的 Lit Web 组件，涵盖目录结构、规格文档、类实现、样式、测试及 Storybook 故事生成。
创建新的 UI 组件
初始化前端组件库模块
npx skills add IgniteUI/igniteui-webcomponents --skill create-new-component -g -y
提供组件PR的审查清单，涵盖结构、API、规范、无障碍及测试等维度，确保代码质量与项目规范一致。
审查添加或修改组件的Pull Request
合并前的质量检查或PR提交前的自我审查
npx skills add IgniteUI/igniteui-webcomponents --skill review-component-pr -g -y
指导如何遵循 SCSS 转 Lit CSS 工作流更新组件样式，支持主题系统。处理布局、颜色及主题变量，确保不硬编码值并正确使用主题差异文件。
更新组件边框圆角
添加按钮悬停样式
修复特定主题下的芯片颜色
npx skills add IgniteUI/igniteui-webcomponents --skill update-component-styles -g -y
规范 SKILL.md 的编写与更新，包括 frontmatter 校验、描述格式及 500 行长度限制，指导 Agent 创建或修改技能文件。
创建新的 skill 文件
编辑现有 skill 的 frontmatter 或内容
npx skills add IgniteUI/igniteui-webcomponents --skill skill-authoring -g -y
帮助用户识别最适合UI需求的Ignite UI Web Components，提供官方文档、示例和API链接。支持组件对比、包定位及功能匹配，需先配置MCP服务器以获取组件列表。
询问适合特定UI模式（如表单、表格）的组件
需要比较不同组件选项（如Grid Lite与Premium Grid）
查找特定功能的组件及其所属包
获取组件的官方文档或示例链接
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-choose-components -g -y
指导AI为Ignite UI Web Components应用配置主题，支持CSS自定义属性与Sass。涵盖内置主题切换、自定义调色板、组件级样式调整及MCP服务器集成，实现UI外观定制。
用户希望应用或切换预设主题（如Material、Fluent）
需要创建自定义调色板或全局主题
要求通过设计令牌或::part重设特定组件样式
需要调整间距、尺寸或切换明暗模式
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-customize-component-theme -g -y
将 Figma 设计稿（含 Indigo.Design、第三方库及普通帧）转换为基于 Ignite UI Web Components 的生产级应用视图。支持 React/Angular/Vue，通过 MCP 服务器协作完成从设计解析、组件映射、主题生成到视觉验证的全流程。
需要将 Figma 设计文件转换为 Ignite UI Web Components 代码
基于 Figma URL 或画板实现带有特定设计系统（如 Material 3, Fluent）的 Web Components 界面
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-figma-to-app -g -y
根据设计图片生成 Ignite UI Web Components 视图。通过 MCP 工具发现组件、提取颜色/排版生成主题，并实现高保真前端界面，适用于将截图或线框图转化为可运行代码的场景。
用户提供设计图片并要求构建视图
用户请求 'implement this design' 或 'build this UI'
需要将 mockup 转换为 Ignite UI 页面
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-generate-from-image-design -g -y
配置 Ignite UI Web Components 数据网格，涵盖组件选型、Shadow DOM 主题注入、包注册及布局排序过滤设置。
在 Web Components 应用中添加数据网格
修复自定义元素或 Shadow DOM 中未样式化或尺寸错误的网格
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-grids -g -y
协助用户将 Ignite UI Web Components 集成至 React、Angular、Vue 3 或原生 JS 项目。自动检测框架并指导包选择、组件注册及配置，解决集成报错。
在项目中添加 Ignite UI Web Components
解决框架特定的集成或注册错误
询问 React/Angular/Vue 的初始化设置
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-integrate-with-framework -g -y
指导用户通过按需导入和懒加载优化 Ignite UI Web Components 的构建包体积，减少未用组件，提升加载速度。
报告包体积过大或加载缓慢
询问如何单独导入组件
需要懒加载网格、图表等重型组件
需要在 Vite/webpack/Rollup 中审计 Ignite UI 导入以进行树摇优化
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-optimize-bundle-size -g -y
