mcpField
U
ui-development

ui-development

github.com/redpanda-dataDesign & UI4.3k47 installsUpdated today
Repository

About ui-development

A UI development skill for projects using the Redpanda UI Registry. It guides developers through documentation lookup, component installation, styling, and registry-specific constraints.

Key features

  1. 01Look up component documentation
  2. 02Use Registry components
  3. 03Follow spacing and styling rules
  4. 04Modify components with safeguards

Use cases

  1. 01Build UI pages or components
  2. 02Update existing Registry components

MCP support

The workflow starts by using Redpanda UI MCP tools to search documentation or retrieve component information.

Install

Copy the command and run it in a terminal.

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

After installing, type/ui-developmentin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

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

ActionRule
Use componentsuse-ui-registry.md
Add spacingstyle-no-margin-on-registry.md
Customize lookstyle-use-variants.md
Use iconsicon-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/:

  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

Rules

See rules/ directory for detailed guidance.

Comments

Markdown supported