skills.rest
xvawl
xvawlCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/xvawl/template-nextjs --skill react-frontend-expert-xvawl
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
damandeep611damandeep611

agentic-jumpstart-react

Provide React 19 patterns for TanStack Start apps with shadcn/ui and TanStack Query.

Community
Advanced
DimitriGilbertDimitriGilbert
47

formedible

Build type-safe React forms with TanStack Form and Zod validation.

Community
Intermediate
jeninhjeninh

frontend-accessibility

Generate WCAG 2.2 AA-compliant frontend code with semantic HTML and ARIA.

Community
Basic
aRustyDevaRustyDev
7

lang-typescript-patterns-dev

Guide TypeScript development with strict compiler configurations and React component patterns.

Community
Advanced