frontend-development

Name: frontend-development
Availability: InStock
Author: locnbk2002

Guide React and TypeScript frontend development with Suspense, lazy loading, and TanStack Query/Router.

1|Updated Feb 28, 2026

Search Tags:#typescript #development #performance #frontend #react #tanstack

Ready to run

npx skills add https://github.com/locnbk2002/my-copilot --skill frontend-development-locnbk2002

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/locnbk2002/my-copilot/tree/main/my-copilot-frontend/skills/frontend-development
Command: npx skills add https://github.com/locnbk2002/my-copilot --skill frontend-development-locnbk2002

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of robust, performant, and maintainable React applications by enforcing modern best practices and patterns.

Core Features & Use Cases

Component Development: Guides the creation of reusable React components with TypeScript.
Feature Scaffolding: Provides a structured approach to building new features, including API, components, and routing.
Data Fetching: Emphasizes Suspense-based data fetching with useSuspenseQuery for seamless loading states.
Routing: Integrates TanStack Router for declarative routing.
Performance Optimization: Offers patterns for lazy loading and memoization.
Use Case: Quickly scaffold a new user profile feature, including its API endpoints, components, and route, ensuring it loads efficiently and handles data fetching gracefully.

Quick Start

Use the frontend-development skill to create a new React component for a user profile card.

Frequently Asked Questions about frontend-development

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

FAQPage Schema

How do I structure a new React feature with TypeScript and TanStack Router?▼

Suspense-based data fetching in React uses the `useSuspenseQuery` hook from TanStack Query to manage loading states seamlessly. This pattern fetches data gracefully and handles asynchronous operations without manual loading state management.

What is the best way to optimize React frontend performance with lazy loading?▼

Optimizing React frontend performance involves implementing lazy loading and memoization patterns. These modern techniques ensure components load efficiently, reducing initial bundle size and improving application rendering speed.

Does this frontend development approach enforce strict TypeScript standards?▼

Yes, the frontend development approach enforces strict TypeScript standards for building robust React applications. It guides component creation and feature scaffolding while maintaining strict type safety and core codebase principles.

Can I use TanStack Router for declarative routing in a React application?▼

Yes, you can use TanStack Router for declarative routing in React applications. It guides the integration of routing within your feature scaffolding to create structured, maintainable navigation paths.

When do I need Suspense for data fetching in modern React applications?▼

You need Suspense for data fetching when building modern React applications that require seamless loading states. Using `useSuspenseQuery` ensures data fetching is handled gracefully during component rendering.