hapo:frontend-development

Guide React/TypeScript frontend development with TanStack Query and Router.

54|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/haposoft/cafekit --skill hapo-frontend-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hapo:frontend-development
Source: https://github.com/haposoft/cafekit/tree/main/packages/spec/src/claude/skills/frontend-development
Command: npx skills add https://github.com/haposoft/cafekit --skill hapo-frontend-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, tanstack/query, tanstack/router, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of building modern React/TypeScript frontends, providing a comprehensive guide and best practices for efficient development.

Core Features & Use Cases

  • Modern Patterns: Follows best practices for modern React development, including Suspense-based data fetching, lazy loading, and TypeScript usage.
  • Component Development: Offers guidelines for creating efficient and maintainable components.
  • Data Fetching: Integrates with TanStack Query for efficient data fetching and caching.
  • Routing: Utilizes TanStack Router for seamless routing and navigation.
  • Performance Optimization: Includes tips for optimizing frontend performance and scalability.
  • Use Case: Ideal for developers looking to build React/TypeScript applications with best practices, saving time and effort.

Quick Start

Create a new React/TypeScript component by following the guidelines in the hapo:frontend-development skill.

Frequently Asked Questions about hapo:frontend-development

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

FAQPage Schema
What are the best practices for React and TypeScript frontend development?

React and TypeScript frontend development best practices involve using Suspense-based data fetching, lazy loading, and efficient component creation to ensure scalable and performant applications.

How do I optimize React performance with TanStack Query?

Optimize React performance with TanStack Query by leveraging its efficient data fetching and caching mechanisms, which integrate directly with modern patterns like Suspense to reduce unnecessary renders and improve scalability.

Do I need TanStack Router and TanStack Query to build a scalable React frontend?

Yes, you need TanStack Router and TanStack Query to implement the seamless routing and efficient data fetching required for building scalable and performant React frontends using these specific best practices.

How do I set up data fetching and routing in a modern React TypeScript application?

Set up data fetching and routing in a React TypeScript application by integrating TanStack Query for caching and TanStack Router for navigation, utilizing Suspense and lazy loading to optimize component loading.

When should I use Suspense and lazy loading in React component development?

Use Suspense and lazy loading in React component development when you need to optimize frontend performance, ensuring efficient component rendering and scalable data fetching within your TypeScript application architecture.