Agent Skills
› IgniteUI/igniteui-webcomponents
IgniteUI/igniteui-webcomponents
GitHub为现有Lit Web组件添加响应式属性，包括类型声明、装饰器、测试及文档生成。指导如何正确设置默认值、反射规则及JSDoc注释规范，确保API文档准确性。
Install All Skills
npx skills add IgniteUI/igniteui-webcomponents --all -g -y
Skills in Collection (10)
为现有Lit Web组件添加响应式属性，包括类型声明、装饰器、测试及文档生成。指导如何正确设置默认值、反射规则及JSDoc注释规范，确保API文档准确性。
为组件添加新属性
修改组件的响应式状态
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
提供组件 Pull Request 的综合代码审查清单，涵盖结构、API、无障碍、行为及测试等维度，确保代码质量与规范合规。
审查添加或修改组件的 PR
合并前的质量门禁检查
提交 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
辅助识别并选择适用于特定UI需求的Ignite UI Web Components，提供官方文档、示例及API链接。需先配置MCP服务器以获取组件列表。
询问适合特定UI场景的组件
需要查看组件官方文档或示例
探索可用的Ignite UI组件
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-choose-components -g -y
指导AI代理使用CSS自定义属性或Sass为Ignite UI Web Components应用定制主题，支持组件级样式、布局控制及通过MCP服务器实现AI辅助主题生成。
需要为Ignite UI组件配置主题颜色或设计系统
需要调整组件的间距、尺寸或圆角等布局样式
需要集成Ignite UI Theming MCP服务器进行AI辅助开发
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-customize-component-theme -g -y
辅助将 Ignite UI Web Components 集成至 React、Angular、Vue 或原生 JS 应用，自动检测框架并加载对应配置与安装步骤。
用户询问如何在特定框架中集成 Ignite UI 组件
需要解决框架特定的组件导入和注册问题
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-integrate-with-framework -g -y
指导用户通过按需导入Ignite UI Web Components组件及启用树摇优化应用包体积，减少加载时间，并提供React集成建议与包分析工具使用指南。
My bundle size is too large
How do I reduce the size of igniteui-webcomponents?
Import only the components I need
Tree-shake unused components
Optimize imports for production
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-optimize-bundle-size -g -y
基于设计图像生成 Ignite UI Web Components 视图。通过 MCP 工具分析图片、发现组件、生成主题并实现 UI，确保高保真还原设计稿。
用户提供设计图像（截图、原型等）要求构建视图
用户请求实现特定设计或从图像创建页面
npx skills add IgniteUI/igniteui-webcomponents --skill igniteui-wc-generate-from-image-design -g -y
