菜单
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
Write and run Playwright E2E tests for Redpanda Console using testcontainers. Analyzes test failures, adds missing testids, and improves test stability. Use when user requests E2E tests, Playwright tests, integration tests, test failures, missing testids, or mentions 'test workflow', 'browser testing', 'end-to-end', or 'testcontainers'.
Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4) Migrating from legacy form patterns, (5) Implementing forms with react-hook-form and Zod validation.
Manage client and server state with Zustand stores and React Query patterns.
| 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.