Does it support monorepo structures?

Yes, it is designed with standard monorepo layouts in mind, utilizing package scopes like @project/ and organized app-specific paths.

What is the primary focus of the Frontend Patterns skill?

It focuses on the data layer of React/Next.js applications, specifically handling API interactions via ORPC and state management via TanStack Query.

How does this differ from the frontend-design skill?

While frontend-design handles visuals and styling, frontend-patterns manages data fetching, mutations, and the underlying logic connecting the UI to the backend.

Which libraries are used for notifications and errors?

The skill standardizes on using Sonner for toast notifications to provide consistent success and error feedback during data mutations.

Frontend Data Patterns

Name: Frontend Data Patterns
Author: grmkris

bygrmkris

0•

API 개발

Implements standardized React and Next.js data patterns using TanStack Query and ORPC for robust state management.

The Frontend Data Patterns skill provides Claude with specialized knowledge for architecting the data layer of modern web applications. It focuses on TanStack Query (React Query) hooks, ORPC client integration, and consistent error handling strategies. By utilizing this skill, developers can quickly generate type-safe fetching and mutation logic, manage cache invalidation seamlessly, and ensure a standardized project structure across Next.js monorepos. It serves as the logical logic-heavy counterpart to visual design skills, handling the essential 'plumbing' of the application.

주요 기능

01Consistent error handling with Sonner toast notifications

02Standardized TanStack Query hook generation

03Type-safe ORPC client integration patterns

04Automated cache invalidation for data consistency

05Monorepo-optimized file structure and pathing

060 GitHub stars

사용 사례

01Scaffolding type-safe data fetching hooks for Next.js components

02Setting up query clients and authentication providers in a monorepo

03Implementing complex API mutations with automatic UI feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add grmkris/yoda.fun frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill