frontend-dev-guidelines

Provide React/TypeScript frontend development guidelines covering Suspense, lazy loading, and MUI v7 styling.

Updated Dec 20, 2025

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

Ready to run

npx skills add https://github.com/captain-corgi/marketplace-website --skill frontend-dev-guidelines-captain-corgi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/captain-corgi/marketplace-website/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/captain-corgi/marketplace-website --skill frontend-dev-guidelines-captain-corgi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill eliminates the guesswork and boilerplate code in frontend development, providing ready-to-use templates and best practices.

Core Features & Use Cases

Suspense-Based Development: Modern patterns with lazy loading, useSuspenseQuery, and SuspenseLoader components.

Core Features & Use Cases

Modern React Patterns: Complete component templates with TypeScript, lazy loading, and Suspense boundaries.
Use Case: When creating a new user profile feature, use this Skill to generate the complete structure with API service, hooks, and routing.
Use Case: Need to optimize a slow component? Get performance patterns with useMemo, useCallback, and React.memo.

Quick Start

Create a new React component that fetches user data using useSuspenseQuery and is wrapped in SuspenseLoader for optimal loading UX.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

How do I structure a React app with TypeScript and best practices for scalability?▼

Organize your React/TypeScript app using feature-based folder structure with strict aliasing for imports, functional components typed with React.FC, and code-splitting via React.lazy and Suspense boundaries. This approach ensures maintainable, scalable frontend code as your application grows.

What's the best way to handle data fetching in React with Suspense?▼

Use useSuspenseQuery patterns with TanStack Query wrapped in SuspenseLoader components for modern data fetching. This provides optimal loading UX, automatic error handling, and eliminates manual loading state management in your React components.

How do I optimize performance in React components?▼

Apply performance patterns including useMemo, useCallback, and React.memo to prevent unnecessary re-renders. Combined with lazy loading and code-splitting strategies, these techniques significantly reduce slow component render times and improve overall app responsiveness.

Can I use TanStack Router with React and TypeScript for folder-based routing?▼

Yes. TanStack Router integrates with React/TypeScript to enable folder-based routing with consistent file organization. This provides type-safe route definitions and scalable routing patterns aligned with your feature-based project structure.

How do I style React components consistently with MUI v7?▼

Use sx-based styling in MUI v7 for consistent, component-scoped styling across your React app. This approach integrates seamlessly with TypeScript and feature-based project organization while maintaining design system alignment.

What TypeScript best practices apply to React component and page files?▼

Type components with React.FC, enforce strict aliasing for imports across your app, and maintain consistent file organization by feature. These practices catch errors at development time and make your codebase more maintainable and refactorable.