ui-development
Builds UI using the Redpanda component registry. Strictly follows accessibility standards and modern Tailwind v4 practices.
Install
mkdir -p .claude/skills/ui-development && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4585" && unzip -o skill.zip -d .claude/skills/ui-development && rm skill.zipInstalls to .claude/skills/ui-development
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.Key capabilities
- →Installs Redpanda registry components via CLI
- →Validates accessibility best practices
- →Integrates Tailwind v4 UI tokens
- →Automates component documentation fetching
How it works
It triggers specific MCP tools to pull components from the registry while enforcing strict file-system rules for component placement and CSS overrides.
Inputs & outputs
When to use ui-development
- →Install new UI registry component
- →Fetch registry documentation
- →Build accessible frontend pages
About this skill
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.
When not to use it
- →Using deprecated @redpanda-data/ui libraries
- →Designing pages without registry components
Limitations
- →Requires active Redpanda Registry access
- →No inline styles permitted on components
- →Restricted file management rules
How it compares
It enforces strict standardization of UI components via registry-level control, preventing legacy library usage.
Compared to similar skills
ui-development side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui-development (this skill) | 1 | 5mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| shadcn-ui-setup | 37 | 8mo | Review | Beginner |
| ui | 4 | 1mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by redpanda-data
View all by redpanda-data →You might also like
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
shadcn-ui-setup
maneeshanif
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
react-skills
alexander-kastil
Build clean, accessible React components with TypeScript and Fluent UI. Use when creating new React components, converting designs to code, building reusable UI patterns, optimizing component performance, implementing accessibility guidelines, or structuring React projects. Supports component scaffo
frontend-ui-engineering
PM4-SmartFinance
Builds production-quality React 19 UIs that match SmartFinance conventions. Use when creating or modifying components, layouts, forms, charts, or any user-facing interface. Use when accessibility, semantic HTML, or design-token compliance is at risk.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.