mcpField
U
ui-development

ui-development

github.com/redpanda-data设计与 UI4.3k47 次安装今天更新
代码仓库

关于 ui-development

为使用 Redpanda UI Registry 的项目提供 UI 开发规范，面向构建或修改组件和页面的开发者。涵盖文档查询、组件安装及样式约束。

主要功能

  1. 01查询组件文档
  2. 02使用 Registry 组件
  3. 03遵循间距与样式规范
  4. 04按规范修改组件

适用场景

  1. 01创建 UI 页面或组件
  2. 02调整现有 Registry 组件

MCP 相关

工作流要求先使用 Redpanda UI 的 MCP 工具搜索文档或获取组件信息。

安装

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

$npx skills add https://github.com/redpanda-data/console --skill ui-development

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

包含的文件

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

rules/
icon-system.md
style-no-margin-on-registry.md
style-use-variants.md
use-ui-registry.md

详细介绍

UI 开发

使用 Redpanda UI Registry 构建用户界面。

激活条件

  • 构建/创建 UI 组件或页面
  • 关键词：“design system”“ui”“frontend”“registry”“component”
  • 修改现有 Registry 组件

快速参考

操作规则
使用组件use-ui-registry.md
添加间距style-no-margin-on-registry.md
自定义外观style-use-variants.md
使用图标icon-system.md

工作流

1. 获取文档
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
2. 检查现有组件
ls src/components/redpanda-ui/

关键规则

始终
  • 使用 src/components/redpanda-ui/ 中的 Registry 组件
  • 在编写 UI 代码之前，首先调用 mcp__redpanda-ui__get_component
  • 通过 CLI 安装组件
绝不
  • 使用 @redpanda-data/ui（已弃用）——参见 no-legacy
  • 复制/粘贴 Registry 源代码（通过 CLI 安装）
  • 未经用户请求安装外部 UI 库
  • 在 Registry 组件上使用内联 style 属性
  • 直接在 Registry 组件上添加 margin className
修改 Registry 组件时

如果编辑 src/components/redpanda-ui/ 中的文件：

  1. 在注释中使用 // UPSTREAM: <reason> 说明更改
  2. 保持更改精简且向后兼容
  3. 记录更改，以便日后提交到上游 Registry

规则

详细指南请参见 rules/ 目录。

评论

支持 Markdown