Build your first Claude Code app

free beta with Pawgrammer

Frontend Development Guidelines

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization with Material-UI v7.

Featureddevelopmentfrontendweb

Frontend Development Guidelines

Production-proven patterns for building modern React/TypeScript applications with current industry standards, covering component architecture, TanStack Query/Router integration, MUI v7 styling, and performance optimization techniques.

Essential for frontend developers building React applications with Material-UI v7, focusing on performance and modern patterns.

Core Purpose

This skill provides comprehensive frontend development patterns for:

  • React Suspense: Modern data fetching with Suspense boundaries
  • Lazy Loading: Code splitting and performance optimization
  • File Organization: Scalable project structure
  • Material-UI v7: Latest MUI patterns and theming
  • TanStack Ecosystem: Query and Router integration
  • Performance: Optimization strategies for production

Key Features

Modern React Patterns

Component Architecture:

  • Suspense-based data fetching
  • Lazy loading with React.lazy()
  • Proper component organization
  • Reusable component patterns

Data Management:

  • TanStack Query for server state
  • Efficient caching strategies
  • Optimistic updates
  • Error boundary patterns

Styling & UI:

  • Material-UI v7 components
  • Theme customization
  • Responsive design patterns
  • Accessibility best practices

Performance:

  • Code splitting strategies
  • Render optimization
  • Bundle size management
  • Performance monitoring

Use Cases

Perfect for:

  • React Applications: Building with modern patterns
  • Material-UI Projects: MUI v7 implementation
  • Performance Optimization: Production-ready apps
  • Team Standards: Consistent frontend practices
  • Enterprise Apps: Scalable architecture

Getting Started

  1. Review Patterns: Study Suspense and lazy loading
  2. Set Up TanStack: Integrate Query and Router
  3. Configure MUI: Apply Material-UI v7 theming
  4. Optimize Performance: Implement code splitting
  5. Organize Files: Follow project structure guidelines

Technology Stack

  • React 18 with TypeScript
  • Material-UI v7
  • TanStack Query (React Query)
  • TanStack Router
  • Modern build tools

Credits

Created by diet103 as part of the Claude Code Infrastructure Showcase, refined through 6 months of building production React applications.

Real-world patterns from managing complex React frontends, shared after the popular "Claude Code is a Beast" Reddit post sparked hundreds of community requests.