skills.rest
mujez
mujezOFFICIAL
Explore all skills by this author →
GitHub

frontend-react

Enforce React development best practices across components, state, data fetching, styling, and testing.

47|6|Updated Feb 10, 2026
Search Tags:#typescript#testing#accessibility#frontend#react#nextjs#ui-patterns
One-click install
npx skills add https://github.com/mujez/claude-skills --skill frontend-react-mujez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-react
Source: https://github.com/mujez/claude-skills/tree/main/skills/frontend-react
Command: npx skills add https://github.com/mujez/claude-skills --skill frontend-react-mujez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies and enforces frontend React development best practices, guiding components, state management, data fetching, styling, testing, and accessibility to deliver consistent, high-quality code.

Core Features & Use Cases

  • Comprehensive stack guidance: React 19+, TypeScript, Next.js 15+, Tailwind, and modern tooling to standardize projects.
  • Component design and patterns: Rules promoting functional components, composition, single responsibility, and co-location of code.
  • Quality and accessibility: Testing strategies, accessibility guidelines, performance considerations, and error handling.
  • Use case: Apply these standards when building a new React component library or a Next.js app to ensure consistency and maintainability.

Quick Start

Provide a React task or component example and I will apply frontend-react guidelines to produce a compliant solution.

Frequently Asked Questions about frontend-react

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

FAQPage Schema
How do I enforce React best practices for state management and component design?▼

React best practices are enforced through functional component composition, strict TypeScript typing, and single responsibility principles. This standardizes state management and ensures consistent, maintainable component architecture across your project.

What is the best way to structure data fetching and testing strategies in a Next.js app?▼

The best way to structure data fetching and testing in a Next.js app is to standardize on server components and consistent testing strategies. This ensures performance optimization and reliable behavior across your modern React components.

Can I use this React pattern guidance with TypeScript and Tailwind CSS?▼

Yes, this guidance is designed for modern React projects using TypeScript and Tailwind CSS. It requires strict typing and applies battle-tested UI patterns to deliver high-quality, accessible markup.

Why should I avoid class components when building a React component library?▼

You should avoid class components to maintain disciplined patterns and functional composition. Using functional components with strong TypeScript typing ensures better state management, accessibility, and consistent testing strategies.

How do I handle accessibility guidelines when creating modern React components?▼

You handle accessibility guidelines by enforcing strict, accessible markup rules during component design. This ensures your React components meet quality standards and provide consistent user experiences.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
fusenginefusengine
22

nextjs-shadcn

Integrate shadcn/ui components into Next.js App Router applications.

Community
Intermediate
locnbk2002locnbk2002
1

ui-styling

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

Community
Intermediate
linnefromicelinnefromice

frontend-patterns

Standardize React/Next.js frontend architecture with reusable TypeScript patterns.

Community
Intermediate