Skill Gallery
← Back to list
redpanda-data

ui-development

by redpanda-data

Redpanda Console is a developer-friendly UI for managing your Kafka/Redpanda workloads. Console gives you a simple, interactive approach for gaining visibility into your topics, masking data, managing consumer groups, and exploring real-time data with time-travel debugging.

⭐ 4,220🍴 409📅 Jan 23, 2026
apache-kafkadataopsgokafkakafka-guikafka-uireacttypescript
View on GitHubRun in Manus

Use Cases

⚡

Efficient Code Generation

Auto-generate boilerplate code to reduce development time.

🔍

Code Review Assistance

Analyze PR changes and suggest improvements.

🔧

Refactoring Suggestions

Suggest refactoring options to improve code quality.

🧪

Test Code Generation

Auto-generate unit tests and E2E tests.

SKILL.md

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

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.

Score

Total Score

80/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
✓説明文

100文字以上の説明がある

+10
✓人気

GitHub Stars 1000以上

+15
✓最近の活動

1ヶ月以内に更新

+10
✓フォーク

10回以上フォークされている

+5
○Issue管理

オープンIssueが50未満

0/5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon