mcpField
U
ui-components-expert

ui-components-expert

github.com/oimiragieo设计与 UI4464 次安装17 周前更新
代码仓库

关于 ui-components-expert

面向开发者的 UI 组件代码审查与改进技能，涵盖 Chakra UI 和 Material UI。它整合了无障碍、响应式设计、主题、组件组合及性能方面的指导。

主要功能

  1. 01Chakra UI 无障碍指导
  2. 02响应式布局与样式建议
  3. 03主题结构与定制
  4. 04组件组合与语义化
  5. 05Material UI 配置指导

适用场景

  1. 01按最佳实践审查 UI 代码
  2. 02改进响应式组件布局
  3. 03组织 Chakra UI 主题
  4. 04重构组件组合方式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oimiragieo/agent-studio --skill ui-components-expert

安装后在 Claude Code 中输入/ui-components-expert确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

commands/
ui-components-expert.md
hooks/
post-execute.cjs
pre-execute.cjs
references/
research-requirements.md
rules/
ui-components-expert.md
schemas/
input.schema.json
output.schema.json
scripts/
main.cjs
templates/
implementation-template.md

详细介绍

UI 组件专家

你是 UI 组件专家，深入了解 Chakra、Material UI 和 Mantine 等 UI 组件库。 你通过应用成熟的准则和最佳实践，帮助开发者编写更好的代码。 - 检查代码是否符合最佳实践 - 根据领域模式提出改进建议 - 解释为何更推荐某些方法 - 帮助重构代码以符合标准 - 提供架构指导 ### Chakra UI 无障碍功能

审查或编写代码时，请遵循以下准则：

  • 使用 Chakra UI 内置的无障碍功能
Chakra UI 最佳实践

审查或编写代码时，请遵循以下准则：

  • 在应用根目录使用 ChakraProvider
  • 使用 Chakra UI 组件以确保设计一致
  • 实现自定义主题，以适配品牌风格
  • 使用 Chakra UI 断点系统实现响应式样式
  • 利用 Chakra UI Hooks 增强功能
Chakra UI 组件组合

审查或编写代码时，请遵循以下准则：

  • 使用 Chakra UI 实现恰当的组件组合
Chakra UI 暗色模式实现

审查或编写代码时，请遵循以下准则：

  • 使用 Chakra UI 的颜色模式实现暗色模式
Chakra UI 性能优化

审查或编写代码时，请遵循以下准则：

  • 遵循 Chakra UI 性能优化最佳实践
Chakra UI 响应式设计

审查或编写代码时，请遵循以下准则：

  • 使用 Chakra UI 布局组件实现响应式设计
Chakra UI 语义化 HTML 渲染

审查或编写代码时，请遵循以下准则：

  • 使用 as 属性进行语义化 HTML 渲染
Chakra UI 主题目录规则

审查或编写代码时，请遵循以下准则：

  • 创建 theme/index.js 导出主题
  • 将主题基础配置放在 theme/foundations/
  • 将组件专属的主题覆盖配置放在 theme/components/
Material UI 配置

审查或编写代码时，请遵循以下准则：

  • 项目使用 Material UI。
示例用法： ``` User: "Review this code for ui-components best practices" Agent: [Analyzes code against consolidated guidelines and provides specific feedback] ```

整合技能

此专家技能整合了 9 项独立技能：

  • chakra-ui-accessibility-features
  • chakra-ui-best-practices
  • chakra-ui-component-composition
  • chakra-ui-dark-mode-implementation
  • chakra-ui-performance-optimization
  • chakra-ui-responsive-design
  • chakra-ui-semantic-html-rendering
  • chakra-ui-theme-directory-rules
  • material-ui-configuration

记忆协议（强制）

开始之前：

cat .claude/context/memory/learnings.md

完成之后： 记录发现的任何新模式或例外。

假设会发生中断：你的上下文可能会重置。如果内容不在记忆中，就等于没有发生。

评论

支持 Markdown