skills.rest
donggyun112
donggyun112COMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Develop React and TypeScript user interfaces using the Redpanda UI Registry.

3|2|Updated Aug 31, 2025
Search Tags:#typescript#vitest#frontend#react#design system#ui components
One-click install
npx skills add https://github.com/donggyun112/ai-librarian --skill frontend-developer-donggyun112
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/donggyun112/ai-librarian/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/donggyun112/ai-librarian --skill frontend-developer-donggyun112

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of building user interfaces by leveraging a standardized design system and component library, ensuring consistency and accelerating development.

Core Features & Use Cases

  • Component-Based Development: Utilize pre-built, reusable UI components from the Redpanda UI Registry.
  • TypeScript & React: Develop robust and type-safe frontend applications.
  • Testing Integration: Includes patterns for writing unit and integration tests with Vitest.
  • Use Case: When a user requests a new form for user registration, this Skill can generate the form component using registry elements and ensure it's properly tested.

Quick Start

Use the frontend-developer skill to create a new React component for a user profile card.

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 UI components using a design system?▼

Build React UI components by integrating pre-built, reusable elements from the Redpanda UI Registry to ensure styling consistency and type-safe development with TypeScript.

What is the best way to ensure consistency when developing frontend applications?▼

Ensure consistency in frontend applications by adhering to strict guidelines for component usage and styling provided by a standardized design system and component library.

How do I write tests for React components using Vitest?▼

Write tests for React components using Vitest by applying integrated unit and testing patterns, ensuring UI components generated from the registry maintain code quality.

Can I use TypeScript to develop forms with a component library?▼

Develop type-safe forms with TypeScript by utilizing pre-built UI components from the registry, streamlining the creation of complex elements like user registration forms.

Does this frontend development approach support custom user profile cards?▼

This approach supports custom user profile cards by generating new React components using standardized registry elements while maintaining strict design system consistency.

Related Skills

Explore More Software Engineering Skills→
AngelP17AngelP17
1

frontend-developer

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

Community
Intermediate
roberfloroberflo
1

react-testing

Execute React UI tests with Testing Library, Vitest, and MSW.

Community
Advanced
GemachDAOGemachDAO
4

gdex-ui-wallet-connection

Build React UI components for wallet connection and API-key authentication in GDEX apps.

Official
Advanced
anicca-labsanicca-labs

coding-standards

Enforce React Native coding standards with TypeScript, Prettier, and custom rules.

Official
Intermediate