skills.rest
felvieira
felvieiraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-integration

Implement responsive React or Next.js interfaces with Zustand, React Query, and Tailwind.

22|6|Updated Mar 10, 2026
Search Tags:#frontend#react#nextjs#tailwind#zustand#react-query#skeleton
One-click install
npx skills add https://github.com/felvieira/claude-skills-fv --skill frontend-integration-felvieira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-integration
Source: https://github.com/felvieira/claude-skills-fv/tree/main/skills/04-frontend-integration
Command: npx skills add https://github.com/felvieira/claude-skills-fv --skill frontend-integration-felvieira

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need a reliable way to build responsive front‑end interfaces that integrate with APIs, manage state, and provide smooth loading experiences without reinventing standard patterns.

Core Features & Use Cases

  • Implements pages and components using React or Next.js with TypeScript strict mode.
  • Manages global UI state with Zustand and server‑state data fetching with React Query.
  • Provides ready‑to‑use skeleton loading components and Tailwind‑based responsive design.
  • Suitable for building dashboards, product listings, forms, and any data‑driven UI that requires authentication tokens kept only in memory.

Quick Start

Generate a product listing page component with Zustand state and React Query data fetching, including skeleton loading.

Frequently Asked Questions about frontend-integration

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

FAQPage Schema
How do I build a responsive React UI with Zustand and React Query?▼

Build responsive React UIs by implementing TypeScript components, managing global state via Zustand, fetching server-state with React Query, and styling responsive layouts using Tailwind CSS.

How do I add skeleton loading to a Next.js data fetching component?▼

Add skeleton loading to Next.js data fetching components by utilizing ready-to-use skeleton loading components alongside React Query, ensuring smooth loading experiences while fetching server-state data for data-driven UIs.

Can I use this approach to build authenticated dashboards with tokens kept in memory?▼

Yes, you can build authenticated dashboards requiring client-side token handling kept in memory. The implementation integrates with API endpoints and applies strict TypeScript typing for secure data-driven UIs.

What is the best way to manage state in a React application using React Query?▼

Separate state concerns: use Zustand for global UI state and React Query for server-state data fetching. This combination provides reliable state management without reinventing standard frontend patterns.

Does this frontend integration pattern require strict TypeScript typing?▼

Yes, this frontend integration pattern requires strict TypeScript typing. It implements pages and components using React or Next.js with TypeScript strict mode to ensure type safety across API endpoints and client-side state.

Related Skills

Explore More Software Engineering Skills→
parhummparhumm
25

frontend-scaffold

Generate React/Next.js frontend scaffolds from design artifacts and API contracts.

Community
Advanced
AngelP17AngelP17
1

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate
nomos-guildnomos-guild
4

add-api-route

Create Next.js API routes that proxy to backend services with authentication and caching.

Official
Intermediate
eralvarezeralvarez

frontend-design

Generate frontend interfaces from user briefs using React, Vue, or Svelte.

Community
Advanced