redpanda-data/ui-development
frontend/.claude/skills/ui-development/SKILL.md
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
$ install --global
skillsauthnpx skillsauth add redpanda-data/console ui-developmentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 11, 2026, 11:00 PM38.7s5 files scanned
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
| 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_componentas 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
styleprop on registry components - Add margin
classNamedirectly 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.
Related Skills
redpanda-data/frontend/.claude/skills/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance
4,258SKILL.mdUpdated Apr 11, 2026
redpanda-data/testing
testing
VerifiedTrustedCommunity
Write and maintain tests with Vitest v4 dual configuration, mock utilities, and Zustand store testing patterns.
4,258SKILL.mdUpdated Apr 11, 2026
redpanda-data/tanstack-router-migration
development
VerifiedTrustedCommunity
Migrate React applications from React Router to TanStack Router with file-based routing. Use when user requests: (1) Router migration, (2) TanStack Router setup, (3) File-based routing implementation, (4) React Router replacement, (5) Type-safe routing, or mentions 'migrate router', 'tanstack router', 'file-based routes'.
4,258SKILL.mdUpdated Apr 11, 2026
redpanda-data/state-management
tools
VerifiedTrustedCommunity
Manage client and server state with Zustand stores and React Query patterns.
4,258SKILL.mdUpdated Apr 11, 2026