| name | ui-development |
| description | Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices. |
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
1. Fetch Documentation
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
2. 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.
