skills.rest
Thanh-apero
Thanh-aperoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Guide React/TypeScript development with Suspense-based data fetching and performance optimization.

1|1|Updated Jan 15, 2026
Search Tags:#typescript#react#performance optimization#code organization#frontend development
One-click install
npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill frontend-development-thanh-apero
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/Thanh-apero/apero-kit-cli/tree/main/templates/skills/frontend-development
Command: npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill frontend-development-thanh-apero

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide for modern React development, addressing common challenges like data fetching, performance optimization, and code organization.

Core Features & Use Cases

  • Modern React Development: Offers guidelines for creating components, handling data fetching, and optimizing performance.
  • Suspense-based Data Fetching: Utilizes useSuspenseQuery for efficient data loading and caching.
  • Performance Optimization: Includes strategies for optimizing component rendering and preventing layout shifts.
  • Code Organization: Provides best practices for structuring code, organizing files, and using TypeScript effectively.
  • Use Case: Ideal for frontend developers who want to implement best practices in their React/TypeScript projects, especially for building scalable and efficient applications.

Quick Start

Initialize a new project with the frontend development kit by running: ak init my-app --kit frontend-development

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I optimize React component rendering and prevent layout shifts in TypeScript?▼

To optimize React component rendering and prevent layout shifts, apply strategies for performance optimization and structured code organization using TypeScript best practices to build scalable frontend applications.

What is the best way to handle data fetching in modern React applications?▼

The best way to handle data fetching in modern React is utilizing Suspense-based data loading with `useSuspenseQuery` for efficient data caching and rendering alongside React Query.

Does this frontend development kit require React Query and MUI?▼

Yes, the frontend development kit requires React, React Query, and MUI. It applies to frontend development scenarios involving React components and TypeScript best practices.

Can I use Suspense for data loading with React Query?▼

Yes, you can use Suspense for data loading. The kit utilizes `useSuspenseQuery` from React Query to implement efficient data fetching and caching within your React components.

How do I structure code and organize files in a scalable React TypeScript project?▼

To structure code and organize files in a scalable React TypeScript project, follow the provided best practices for code organization, ensuring efficient component creation and TypeScript usage.

Related Skills

Explore More Software Engineering Skills→
Thanh-aperoThanh-apero
1

ck:frontend-development

Guide React/TypeScript frontend development with Suspense, lazy loading, and MUI v7.

Community
Advanced
dankoflydankofly

nextjs15-performance

Optimize Next.js 15 data fetching and bundle performance with established patterns.

Community
Intermediate
dwalleckdwalleck
11

frontend-dev-guidelines

Standardize React/TypeScript frontend development with TanStack Query, TanStack Router, and MUI v7.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced