ck:frontend-development

Guide React/TypeScript frontend development with Suspense, routing, and MUI.

1|Updated Jun 16, 2026
One-click install
npx skills add https://github.com/TNHoang2708/Gym_Ver2 --skill ck-frontend-development-tnhoang2708
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/TNHoang2708/Gym_Ver2/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/TNHoang2708/Gym_Ver2 --skill ck-frontend-development-tnhoang2708

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for modern React/TypeScript frontend development, focusing on performance optimization, code organization, and modern patterns like Suspense and lazy loading.

Core Features & Use Cases

  • Modern Development Patterns: Emphasizes Suspense-based data fetching, lazy loading, and TypeScript best practices.
  • Component Patterns: Offers a complete guide for modern React components, including type safety, lazy loading, and performance optimization.
  • Data Fetching: Detailed explanation of the useSuspenseQuery pattern for efficient data fetching and caching.
  • File Organization: Best practices for organizing frontend code in features/ and components/ directories.
  • Styling: Guidelines for styling components with MUI v7 and optimizing performance.
  • Routing: Setup and configuration of TanStack Router for modern routing patterns.
  • Error Handling: Best practices for handling loading and error states.

Quick Start

Run the pdf skill to generate a new React component following best practices.

Frequently Asked Questions about ck:frontend-development

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

FAQPage Schema
How do I optimize React performance using Suspense and lazy loading?

Organize React code by structuring frontend projects with features/ and components/ directories. This pattern separates feature-specific logic from shared UI components, ensuring maintainable and scalable code organization.

What is the best way to fetch data in React with Suspense?

The best way to fetch data in React with Suspense is using the useSuspenseQuery pattern. This approach efficiently manages data fetching and caching while handling asynchronous states natively within React's Suspense boundaries.

How do I organize frontend code in features and components directories?

Organize frontend code by structuring React projects with features/ and components/ directories. This pattern separates feature-specific logic from shared UI components, ensuring maintainable and scalable code organization.

Does this React TypeScript guide require TanStack Router and React Query?

Yes, this React TypeScript guide requires TanStack Router and React Query. It provides specific setup and configuration patterns for modern routing and data fetching that depend on these libraries.

How do I handle loading and error states in modern React applications?

Handle loading and error states in modern React by leveraging Suspense boundaries for loading fallbacks and Error Boundaries for catching failures. This pattern ensures robust error handling during data fetching.