skills.rest
pluginagentmarketplace
pluginagentmarketplaceCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Standardize React API integration patterns for data fetching and state management.

1|Updated Nov 18, 2025
Search Tags:#typescript#frontend#react#pattern#state-management#api-integration#data-fetching
One-click install
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-api-design --skill frontend-patterns-pluginagentmarketplace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/pluginagentmarketplace/custom-plugin-api-design/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/pluginagentmarketplace/custom-plugin-api-design --skill frontend-patterns-pluginagentmarketplace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires yaml, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Frontend teams often struggle with inconsistent API integration patterns, state management choices, and repeatable data-fetching strategies across React, TypeScript, and various libraries. This skill provides proven patterns, examples, and configuration to standardize frontend API usage.

Core Features & Use Cases

  • Data Fetching Patterns: TanStack Query and SWR integration examples with type-safe clients, optimistic updates, and error handling.
  • State Management Recipes: Zustand, Redux Toolkit patterns with persistence and devtools support.
  • Type-Safe API Client & GraphQL: Typed wrappers and Apollo client setup for robust API consumption.
  • Use Case: A frontend team standardizes data fetching across components, reduces boilerplate, and speeds feature delivery.

Quick Start

Install and enable the frontend-patterns skill, then run the provided examples or customize the configuration to fit your app. For a quick demonstration, request: "frontend-patterns - scaffold a new data table with server state"

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I standardize API integration patterns across React and TypeScript?▼

Standardize React API integration by applying configuration-driven data fetching, runtime validation, and clear cache and error handling using provided scripts and references for consistent client behavior.

What's the best way to set up type-safe data fetching with TanStack Query or SWR?▼

Set up type-safe data fetching with TanStack Query or SWR by using typed API client wrappers, enabling optimistic updates, and enforcing runtime validation to manage server state and errors robustly.

Can I use this skill to scaffold state management for small components and large apps?▼

Yes, you can scaffold state management for small components and large apps using provided Zustand and Redux Toolkit recipes that include persistence and devtools support for scalable architecture.

Does this skill support GraphQL API consumption alongside REST clients?▼

Yes, this skill supports GraphQL API consumption by providing Apollo client setup patterns and typed wrappers to ensure robust, type-safe data fetching alongside standard REST implementations.

How do I handle server state and error handling when integrating APIs in React?▼

Handle server state and API errors in React by enforcing clear cache and error handling requirements through configuration-driven behavior, ensuring consistent validation and state synchronization across components.

Related Skills

Explore More Software Engineering Skills→
wonkpentinkwonkpentink

installation-and-initial-setup

Initialize a React + TypeScript + Vite project with npm and configuration.

Community
Advanced
RepairYourTechRepairYourTech
6

tanstack-query

Manage React server state with TanStack Query v5 data fetching and caching.

Community
Advanced
xabierlameiroxabierlameiro

zustand

Manage React client-side UI state with Zustand stores and selectors.

Community
Intermediate
aberrantCodeaberrantCode
1

react-web

Create test-first React components with TypeScript and React Testing Library.

Community
Intermediate