Back to Details

ui-development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Development

UI开发

Build user interfaces with the Redpanda UI Registry.
使用Redpanda UI Registry构建用户界面。

Activation Conditions

激活条件

  • Building/creating UI components or pages
  • Keywords: "design system", "ui", "frontend", "registry", "component"
  • Modifying existing registry components
  • 构建/创建UI组件或页面
  • 关键词：“设计系统”、“ui”、“前端”、“registry”、“component”
  • 修改现有registry组件

Quick Reference

快速参考

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

Workflow

工作流程

1. Fetch Documentation

1. 获取文档

FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component

2. Check Existing Components

2. 检查现有组件

bash
ls src/components/redpanda-ui/
bash
ls src/components/redpanda-ui/

Critical Rules

关键规则

ALWAYS

始终遵循

  • Use Registry components from 
    src/components/redpanda-ui/
  • Call 
    mcp__redpanda-ui__get_component
    as first action before writing UI code
  • Install components via CLI
  • 使用
    src/components/redpanda-ui/
    中的Registry组件
  • 在编写UI代码前，首先调用
    mcp__redpanda-ui__get_component
  • 通过CLI安装组件

NEVER

禁止操作

  • Use 
    @redpanda-data/ui
    (deprecated) - see no-legacy
  • Copy/paste registry source (install via CLI)
  • Install external UI libraries without user request
  • Use inline 
    style
    prop on registry components
  • Add margin 
    className
    directly to registry components
  • 使用
    @redpanda-data/ui
    （已废弃）——详见no-legacy
  • 复制粘贴registry源代码（通过CLI安装）
  • 未经用户请求安装外部UI库
  • 在registry组件上使用内联
    style
    属性
  • 直接为registry组件添加margin
    className

WHEN MODIFYING REGISTRY COMPONENTS

当修改Registry组件时

If editing files in 
src/components/redpanda-ui/
:
  1. Document the change in a comment with 
    // UPSTREAM: <reason>
  2. Keep changes minimal and backwards-compatible
  3. Track for eventual contribution to upstream registry
如果编辑
src/components/redpanda-ui/
中的文件：
  1. 在注释中用
    // UPSTREAM: <原因>
    记录变更
  2. 保持变更最小且向后兼容
  3. 跟踪变更以便最终贡献给上游registry

Rules

规则

See 
rules/
directory for detailed guidance.
详见
rules/
目录获取详细指导。