UI Development
Build user interfaces with the Redpanda UI Registry.
Activation Conditions
-
Building/creating UI components or pages
-
Keywords: "design system", "ui", "frontend", "registry", "component"
-
Modifying existing registry components
Quick Reference
Action Rule
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
Workflow
- Fetch Documentation
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
- Check Existing Components
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
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
WHEN MODIFYING REGISTRY COMPONENTS
If editing files in src/components/redpanda-ui/ :
-
Document the change in a comment with // UPSTREAM: <reason>
-
Keep changes minimal and backwards-compatible
-
Track for eventual contribution to upstream registry
Rules
See rules/ directory for detailed guidance.