skills.rest
AngelP17
AngelP17COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-developer

Compose Redpanda UI Registry components into React apps with TypeScript and Vitest.

1|Updated Jan 29, 2026
Search Tags:#testing#React#frontend#TypeScript#Vitest#registry#UI components
One-click install
npx skills add https://github.com/AngelP17/factoryops-console --skill frontend-developer-angelp17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/AngelP17/factoryops-console/tree/main/factoryops-console/.agent/skills/frontend-developer
Command: npx skills add https://github.com/AngelP17/factoryops-console --skill frontend-developer-angelp17

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates building user interfaces by composing Redpanda UI Registry components into React apps.

Core Features & Use Cases

  • Use Redpanda UI Registry components from src/components/redpanda-ui/ to assemble consistent, accessible UIs.
  • Build React components with TypeScript and ensure type-safety across UI modules.
  • Write tests with Vitest to validate UI behavior and component contracts.
  • Ideal for requests to create UI components, pages, forms, or design-system references.

Quick Start

Install required registry components with bunx CLI, fetch the library docs, and start building a UI by composing registry components in a React project. Then install dependencies and run tests to verify UI behavior.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React UIs with TypeScript and a design system?▼

Build React UIs by composing Redpanda UI Registry components with TypeScript for type safety. Fetch the registry documentation, install components via bunx CLI, and integrate them into your React app to create consistent, accessible interfaces.

Can I use Vitest to test React components in a TypeScript project?▼

Yes, Vitest validates UI component behavior and contracts in TypeScript-based React projects. Write tests alongside your components to ensure they function correctly before deployment.

What's the workflow for implementing a design system with UI registry components?▼

The registry workflow fetches library documentation, installs required components from the Redpanda UI Registry using bunx, then composes them into React pages and forms. Install dependencies and run Vitest to verify UI behavior end-to-end.

Does the Redpanda UI Registry work with TypeScript React projects?▼

Yes, the Redpanda UI Registry components integrate seamlessly with TypeScript React projects. Functional components from the registry enforce type safety and follow modern React patterns.

How do I create accessible UI components and pages with React?▼

Use Redpanda UI Registry components, which are built for accessibility. Compose them with TypeScript in React to assemble consistent, accessible UIs that meet design system standards without building from scratch.

Related Skills

Explore More Software Engineering Skills→
redpanda-dataredpanda-data
4.3k

frontend-developer

Build React TypeScript UI components from the Redpanda UI Registry.

Official
Advanced
jtvarisjtvaris

ckm:ui-styling

Integrate shadcn/ui components with Tailwind CSS and design tokens for React projects.

Community
Advanced
cpa03cpa03

typescript-refactor

Refactor TypeScript code while preserving type safety and test coverage.

Community
Advanced
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced