react-frontend-expert

Standardize React/TypeScript frontend patterns for components, hooks, and TanStack Query data fetching.

1|Updated Feb 7, 2026

Search Tags:#typescript #accessibility #react #hooks #tanstack-query #frontend-patterns #component-architecture

Ready to run

npx skills add https://github.com/xvawl/template-nextjs --skill react-frontend-expert-xvawl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-frontend-expert
Source: https://github.com/xvawl/template-nextjs/tree/main/.agents/skills/react-frontend-expert
Command: npx skills add https://github.com/xvawl/template-nextjs --skill react-frontend-expert-xvawl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establishes a unified set of React/TypeScript frontend patterns to reduce inconsistency and accelerate delivery across components, hooks, and data-fetching layers.

Core Features & Use Cases

Component architecture: enforce named exports for shared components and discourage default exports for pages to improve reusability and tree-shaking.
Hook patterns: provide reusable useXxx hooks (e.g., useAuth, useDebounce, usePagination) with clear rules and composable APIs.
Data fetching and state management: implement TanStack Query patterns, query options factories, and robust error handling for scalable data flows.
Accessibility and type-safety: enforce strict TypeScript usage, semantic HTML, and WCAG-aligned components for accessible UIs. Use case: teams building modular, scalable React apps can follow the conventions to reduce cognitive load and boilerplate.

Quick Start

Review the repository's React/TypeScript frontend patterns and implement a new feature following the described conventions.

Frequently Asked Questions about react-frontend-expert

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

FAQPage Schema

How do I structure React components and custom hooks to scale a TypeScript application?▼

Standardize React TypeScript component architecture by enforcing named exports for shared components, avoiding React.FC, and using reusable useXxx hooks to reduce inconsistency and accelerate modular app delivery.

What is the best way to manage data fetching and mutations in React with TanStack Query?▼

Manage TanStack Query data fetching by implementing query options factories and robust error handling patterns for queries and mutations, ensuring scalable and type-safe data flows across your React application.

How do I enforce strict TypeScript and accessibility patterns in a React frontend?▼

Enforce strict TypeScript usage and WCAG-aligned accessibility by applying semantic HTML rules within your React functional components, ensuring type-safe and accessible UIs throughout the frontend architecture.

Should I use default exports for pages when building a React application?▼

Discourage default exports for pages and enforce named exports for shared components to improve reusability and optimize tree-shaking within your React TypeScript frontend architecture.

Does this React frontend pattern require any external state management libraries?▼

No external state management libraries are required; the patterns rely on TanStack Query for data fetching and standard custom hooks for state management, reducing cognitive load and boilerplate.