skills.rest
MarioWinter
MarioWinterCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Develop React 19 user interfaces with Vite, TypeScript, and Material UI v7.

Updated Aug 27, 2026
Search Tags:#typescript#frontend#react#ui development#mui#redux
One-click install
npx skills add https://github.com/MarioWinter/merch-miner --skill frontend-mariowinter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/MarioWinter/merch-miner/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/MarioWinter/merch-miner --skill frontend-mariowinter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation and refinement of user interfaces using a modern React stack, ensuring consistency with design systems and efficient development workflows.

Core Features & Use Cases

  • Component Implementation: Develop reusable UI components and feature-specific views.
  • State Management: Integrate global state with Redux Toolkit and local state as needed.
  • API Integration: Connect frontend components to backend services using Axios.
  • Form Handling: Implement robust forms with react-hook-form and Zod validation.
  • Use Case: Implement a new user profile editing form, ensuring all fields are validated, data is saved via API, and user feedback is provided through notifications.

Quick Start

Implement the user profile editing form according to the feature spec.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build a React UI with TypeScript and Material UI v7?▼

Build React user interfaces with TypeScript and Material UI v7 by leveraging a component-based architecture, utilizing Vite for tooling, and applying design system guidelines for consistency.

How do I implement form validation in React using react-hook-form and Zod?▼

Implement form validation in React by integrating react-hook-form with Zod schema validation to manage form state and ensure all user input fields are validated before API data submission.

Does this React frontend stack support Redux Toolkit for global state management?▼

Yes, the React frontend stack supports Redux Toolkit for global state management. It integrates Redux for application-wide state while allowing local state management as needed for feature-specific views.

What is the best way to connect React components to backend APIs using Axios?▼

Connect React components to backend APIs using Axios for HTTP requests. The stack manages data fetching and API integration alongside Redux Toolkit, ensuring user feedback through notistack notifications upon successful saves or errors.

Can I use React Router DOM for routing in a Vite and React 19 application?▼

Yes, you can use React Router DOM for routing in a Vite and React 19 application. The stack handles client-side routing natively, allowing you to build feature-specific views and navigate between user interfaces seamlessly.

Related Skills

Explore More Software Engineering Skills→
sunLeeesunLeee

doc-spec

Transform PRDs into technical specifications with API definitions, data models, and sequence diagrams.

Community
Advanced
hungrytechhungrytech
3

sub-frontend-engineer

Design, implement, and test React UI components with Vite and TypeScript.

Community
Intermediate
yasasbanukaofficialyasasbanukaofficial
1

Curo Frontend — Project Context

Manage React and TypeScript frontend data layer for a secrets management app.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

frontend-development

Build responsive user interfaces with React, Vue, or Angular.

Community
Intermediate