Menu
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/redpanda-data/console --skill ui-developmentThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Client-side React performance optimization patterns.
Connect Query patterns for API calls. Use when working with mutations, queries, or data fetching.
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
Based on SOC occupation classification
Showing SKILL.md
| name | ui-development |
| description | Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices. |
Build user interfaces with the Redpanda UI Registry.
| 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 |
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
ls src/components/redpanda-ui/
src/components/redpanda-ui/mcp__redpanda-ui__get_component as first action before writing UI code@redpanda-data/ui (deprecated) - see no-legacystyle prop on registry componentsclassName directly to registry componentsIf editing files in src/components/redpanda-ui/:
// UPSTREAM: <reason>See rules/ directory for detailed guidance.