frontend-dev-guidelines
This Claude Code skill provides comprehensive guidelines for modern React and TypeScript development, covering Suspense-based data fetching, component lazy loading, file organization using a features directory structure, Material-UI v7 styling, TanStack Router navigation, and performance optimization techniques. Use it when creating new components, pages, or features, implementing data fetching with TanStack Query, setting up routing, styling with MUI, organizing frontend code, or applying TypeScript best practices.
git clone --depth 1 https://github.com/diet103/claude-code-infrastructure-showcase /tmp/frontend-dev-guidelines && cp -r /tmp/frontend-dev-guidelines/.claude/skills/frontend-dev-guidelines ~/.claude/skills/frontend-dev-guidelinesSKILL.md
# Frontend Development Guidelines
## Purpose
Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.
## When to Use This Skill
- Creating new components or pages
- Building new features
- Fetching data with TanStack Query
- Setting up routing with TanStack Router
- Styling components with MUI v7
- Performance optimization
- Organizing frontend code
- TypeScript best practices
---
## Quick Start
### New Component Checklist
Creating a component? Follow this checklist:
- [ ] Use `React.FC<Props>` pattern with TypeScript
- [ ] Lazy load if heavy component: `React.lazy(() => import())`
- [ ] Wrap in `<SuspenseLoader>` for loading states
- [ ] Use `useSuspenseQuery` for data fetching
- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
- [ ] Styles: Inline if <100 lines, separate file if >100 lines
- [ ] Use `useCallback` for event handlers passed to children
- [ ] Default export at bottom
- [ ] No early returns with loading spinners
- [ ] Use `useMuiSnackbar` for user notifications
### New Feature Checklist
Creating a feature? Set up this structure:
- [ ] Create `features/{feature-name}/` directory
- [ ] Create subdirectories: `api/`, `components/`, `hooks/`, `helpers/`, `types/`
- [ ] Create API service file: `api/{feature}Api.ts`
- [ ] Set up TypeScript types in `types/`
- [ ] Create route in `routes/{feature-name}/index.tsx`
- [ ] Lazy load feature components
- [ ] Use Suspense boundaries
- [ ] Export public API from feature `index.ts`
---
## Import Aliases Quick Reference
| Alias | Resolves To | Example |
|-------|-------------|---------|
| `@/` | `src/` | `import { apiClient } from '@/lib/apiClient'` |
| `~types` | `src/types` | `import type { User } from '~types/user'` |
| `~components` | `src/components` | `import { SuspenseLoader } from '~components/SuspenseLoader'` |
| `~features` | `src/features` | `import { authApi } from '~features/auth'` |
Defined in: [vite.config.ts](../../vite.config.ts) lines 180-185
---
## Common Imports Cheatsheet
```typescript
// React & Lazy Loading
import React, { useState, useCallback, useMemo } from 'react';
const Heavy = React.lazy(() => import('./Heavy'));
// MUI Components
import { Box, Paper, Typography, Button, Grid } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';
// TanStack Query (Suspense)
import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query';
// TanStack Router
import { createFileRoute } from '@tanstack/react-router';
// Project Components
import { SuspenseLoader } from '~components/SuspenseLoader';
// Hooks
import { useAuth } from '@/hooks/useAuth';
import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';
// Types
import type { Post } from '~types/post';
```
---
## Topic Guides
### 🎨 Component Patterns
**Modern React components use:**
- `React.FC<Props>` for type safety
- `React.lazy()` for code splitting
- `SuspenseLoader` for loading states
- Named const + default export pattern
**Key Concepts:**
- Lazy load heavy components (DataGrid, charts, editors)
- Always wrap lazy components in Suspense
- Use SuspenseLoader component (with fade animation)
- Component structure: Props → Hooks → Handlers → Render → Export
**[📖 Complete Guide: resources/component-patterns.md](resources/component-patterns.md)**
---
### 📊 Data Fetching
**PRIMARY PATTERN: useSuspenseQuery**
- Use with Suspense boundaries
- Cache-first strategy (check grid cache before API)
- Replaces `isLoading` checks
- Type-safe with generics
**API Service Layer:**
- Create `features/{feature}/api/{feature}Api.ts`
- Use `apiClient` axios instance
- Centralized methods per feature
- Route format: `/form/route` (NOT `/api/form/route`)
**[📖 Complete Guide: resources/data-fetching.md](resources/data-fetching.md)**
---
### 📁 File Organization
**features/ vs components/:**
- `features/`: Domain-specific (posts, comments, auth)
- `components/`: Truly reusable (SuspenseLoader, CustomAppBar)
**Feature Subdirectories:**
```
features/
my-feature/
api/ # API service layer
components/ # Feature components
hooks/ # Custom hooks
helpers/ # Utility functions
types/ # TypeScript types
```
**[📖 Complete Guide: resources/file-organization.md](resources/file-organization.md)**
---
### 🎨 Styling
**Inline vs Separate:**
- <100 lines: Inline `const styles: Record<string, SxProps<Theme>>`
- >100 lines: Separate `.styles.ts` file
**Primary Method:**
- Use `sx` prop for MUI components
- Type-safe with `SxProps<Theme>`
- Theme access: `(theme) => theme.palette.primary.main`
**MUI v7 Grid:**
```typescript
<Grid size={{ xs: 12, md: 6 }}> // ✅ v7 syntax
<Grid xs={12} md={6}> // ❌ Old syntax
```
**[📖 Complete Guide: resources/styling-guide.md](resources/styling-guide.md)**
---
### 🛣️ Routing
**TanStack Router - Folder-Based:**
- Directory: `routes/my-route/index.tsx`
- Lazy load components
- Use `createFileRoute`
- Breadcrumb data in loader
**Example:**
```typescript
import { createFileRoute } from '@tanstack/react-router';
import { lazy } from 'react';
const MyPage = lazy(() => import('@/features/my-feature/components/MyPage'));
export const Route = createFileRoute('/my-route/')({
component: MyPage,
loader: () => ({ crumb: 'My Route' }),
});
```
**[📖 Complete Guide: resources/routing-guide.md](resources/routing-guide.md)**
---
### ⏳ Loading & Error States
**CRITICAL RULE: No Early Returns**
```typescript
// ❌ NEVER - Causes layout shift
if (isLoading) {
return <LoadingSpinner />;
}
// ✅ ALWAYS - Consistent layout
<SuspenseLoader>
<Content />
</SuspenseLoader>
```
**Why:** Prevents Cumulative Layout Shift (CLS), better UX
**Error Handling:**
- Use `useMuiSnackbar` for user feedback
- NEVER `react-toastify`
- TanStack Query `onError` callbacks
**[📖 Complete Guide: resources/loading-and-error-states.md](resUse this agent when you need to debug authentication-related issues with API routes, including 401/403 errors, cookie problems, JWT token issues, route registration problems, or when routes are returning 'not found' despite being defined. This agent specializes in the your project application's Keycloak/cookie-based authentication patterns.\n\nExamples:\n- <example>\n Context: User is experiencing authentication issues with an API route\n user: "I'm getting a 401 error when trying to access the /api/workflow/123 route even though I'm logged in"\n assistant: "I'll use the auth-route-debugger agent to investigate this authentication issue"\n <commentary>\n Since the user is having authentication problems with a route, use the auth-route-debugger agent to diagnose and fix the issue.\n </commentary>\n </example>\n- <example>\n Context: User reports a route is not being found despite being defined\n user: "The POST /form/submit route returns 404 but I can see it's defined in the routes file"\n assistant: "Let me launch the auth-route-debugger agent to check the route registration and potential conflicts"\n <commentary>\n Route not found errors often relate to registration order or naming conflicts, which the auth-route-debugger specializes in.\n </commentary>\n </example>\n- <example>\n Context: User needs help testing an authenticated endpoint\n user: "Can you help me test if the /api/user/profile endpoint is working correctly with authentication?"\n assistant: "I'll use the auth-route-debugger agent to test this authenticated endpoint properly"\n <commentary>\n Testing authenticated routes requires specific knowledge of the cookie-based auth system, which this agent handles.\n </commentary>\n </example>
Use this agent when you need to test routes after implementing or modifying them. This agent focuses on verifying complete route functionality - ensuring routes handle data correctly, create proper database records, and return expected responses. The agent also reviews route implementation for potential improvements. Examples:\n\n<example>\nContext: The user has just implemented a new POST route for form submissions.\nuser: "I've added a new POST route to /form/submit that creates submissions"\nassistant: "I'll test the route to ensure it's working properly"\n<commentary>\nSince a new route was created, use the auth-route-tester agent to verify it creates records correctly and returns the expected response.\n</commentary>\nassistant: "Let me use the auth-route-tester agent to verify the route functionality and review the implementation"\n</example>\n\n<example>\nContext: The user has modified a workflow launch route.\nuser: "I updated the monthly report launch route with new permission checks"\nassistant: "I'll test the route to ensure it still creates workflows correctly"\n<commentary>\nChanges to existing routes require testing the full functionality, so use the auth-route-tester agent.\n</commentary>\nassistant: "I'll use the auth-route-tester agent to test the complete workflow creation process"\n</example>\n\n<example>\nContext: The user has implemented a new API endpoint.\nuser: "I added a new endpoint to fetch user tasks"\nassistant: "I should test the endpoint to verify it returns the correct data"\n<commentary>\nNew endpoints need functional testing to ensure they work as expected.\n</commentary>\nassistant: "Let me launch the auth-route-tester agent to verify the endpoint returns tasks properly"\n</example>
Automatically fix TypeScript compilation errors
Use this agent when you need to review recently written code for adherence to best practices, architectural consistency, and system integration. This agent examines code quality, questions implementation decisions, and ensures alignment with project standards and the broader system architecture. Examples:\n\n<example>\nContext: The user has just implemented a new API endpoint and wants to ensure it follows project patterns.\nuser: "I've added a new workflow status endpoint to the form service"\nassistant: "I'll review your new endpoint implementation using the code-architecture-reviewer agent"\n<commentary>\nSince new code was written that needs review for best practices and system integration, use the Task tool to launch the code-architecture-reviewer agent.\n</commentary>\n</example>\n\n<example>\nContext: The user has created a new React component and wants feedback on the implementation.\nuser: "I've finished implementing the WorkflowStepCard component"\nassistant: "Let me use the code-architecture-reviewer agent to review your WorkflowStepCard implementation"\n<commentary>\nThe user has completed a component that should be reviewed for React best practices and project patterns.\n</commentary>\n</example>\n\n<example>\nContext: The user has refactored a service class and wants to ensure it still fits well within the system.\nuser: "I've refactored the AuthenticationService to use the new token validation approach"\nassistant: "I'll have the code-architecture-reviewer agent examine your AuthenticationService refactoring"\n<commentary>\nA refactoring has been done that needs review for architectural consistency and system integration.\n</commentary>\n</example>
Use this agent when you need to refactor code for better organization, cleaner architecture, or improved maintainability. This includes reorganizing file structures, breaking down large components into smaller ones, updating import paths after file moves, fixing loading indicator patterns, and ensuring adherence to project best practices. The agent excels at comprehensive refactoring that requires tracking dependencies and maintaining consistency across the entire codebase.\n\n<example>\nContext: The user wants to reorganize a messy component structure with large files and poor organization.\nuser: "This components folder is a mess with huge files. Can you help refactor it?"\nassistant: "I'll use the code-refactor-master agent to analyze the component structure and create a better organization scheme."\n<commentary>\nSince the user needs help with refactoring and reorganizing components, use the code-refactor-master agent to analyze the current structure and propose improvements.\n</commentary>\n</example>\n\n<example>\nContext: The user has identified multiple components using early returns with loading indicators instead of proper loading components.\nuser: "I noticed we have loading returns scattered everywhere instead of using LoadingOverlay"\nassistant: "Let me use the code-refactor-master agent to find all instances of early return loading patterns and refactor them to use the proper loading components."\n<commentary>\nThe user has identified a pattern that violates best practices, so use the code-refactor-master agent to systematically find and fix all occurrences.\n</commentary>\n</example>\n\n<example>\nContext: The user wants to break down a large component file into smaller, more manageable pieces.\nuser: "The Dashboard.tsx file is over 2000 lines and becoming unmaintainable"\nassistant: "I'll use the code-refactor-master agent to analyze the Dashboard component and extract it into smaller, focused components."\n<commentary>\nThe user needs help breaking down a large component, which requires careful analysis of dependencies and proper extraction - perfect for the code-refactor-master agent.\n</commentary>\n</example>
Use this agent when you need to create, update, or enhance documentation for any part of the codebase. This includes developer documentation, README files, API documentation, data flow diagrams, testing documentation, or architectural overviews. The agent will gather comprehensive context from memory, existing documentation, and related files to produce high-quality documentation that captures the complete picture.\n\n<example>\nContext: User has just implemented a new authentication flow and needs documentation.\nuser: "I've finished implementing the JWT cookie-based authentication. Can you document this?"\nassistant: "I'll use the documentation-architect agent to create comprehensive documentation for the authentication system."\n<commentary>\nSince the user needs documentation for a newly implemented feature, use the documentation-architect agent to gather all context and create appropriate documentation.\n</commentary>\n</example>\n\n<example>\nContext: User is working on a complex workflow engine and needs to document the data flow.\nuser: "The workflow engine is getting complex. We need to document how data flows through the system."\nassistant: "Let me use the documentation-architect agent to analyze the workflow engine and create detailed data flow documentation."\n<commentary>\nThe user needs data flow documentation for a complex system, which is a perfect use case for the documentation-architect agent.\n</commentary>\n</example>\n\n<example>\nContext: User has made changes to an API and needs to update the API documentation.\nuser: "I've added new endpoints to the form service API. The docs need updating."\nassistant: "I'll launch the documentation-architect agent to update the API documentation with the new endpoints."\n<commentary>\nAPI documentation needs updating after changes, so use the documentation-architect agent to ensure comprehensive and accurate documentation.\n</commentary>\n</example>
Use this agent when you encounter frontend errors, whether they appear during the build process (TypeScript, bundling, linting errors) or at runtime in the browser console (JavaScript errors, React errors, network issues). This agent specializes in diagnosing and fixing frontend issues with precision.\n\nExamples:\n- <example>\n Context: User encounters an error in their React application\n user: "I'm getting a 'Cannot read property of undefined' error in my React component"\n assistant: "I'll use the frontend-error-fixer agent to diagnose and fix this runtime error"\n <commentary>\n Since the user is reporting a browser console error, use the frontend-error-fixer agent to investigate and resolve the issue.\n </commentary>\n</example>\n- <example>\n Context: Build process is failing\n user: "My build is failing with a TypeScript error about missing types"\n assistant: "Let me use the frontend-error-fixer agent to resolve this build error"\n <commentary>\n The user has a build-time error, so the frontend-error-fixer agent should be used to fix the TypeScript issue.\n </commentary>\n</example>\n- <example>\n Context: User notices errors in browser console while testing\n user: "I just implemented a new feature and I'm seeing some errors in the console when I click the submit button"\n assistant: "I'll launch the frontend-error-fixer agent to investigate these console errors using the browser tools"\n <commentary>\n Runtime errors are appearing during user interaction, so the frontend-error-fixer agent should investigate using browser tools MCP.\n </commentary>\n</example>
Use this agent when you have a development plan that needs thorough review before implementation to identify potential issues, missing considerations, or better alternatives. Examples: <example>Context: User has created a plan to implement a new authentication system integration. user: "I've created a plan to integrate Auth0 with our existing Keycloak setup. Can you review this plan before I start implementation?" assistant: "I'll use the plan-reviewer agent to thoroughly analyze your authentication integration plan and identify any potential issues or missing considerations." <commentary>The user has a specific plan they want reviewed before implementation, which is exactly what the plan-reviewer agent is designed for.</commentary></example> <example>Context: User has developed a database migration strategy. user: "Here's my plan for migrating our user data to a new schema. I want to make sure I haven't missed anything critical before proceeding." assistant: "Let me use the plan-reviewer agent to examine your migration plan and check for potential database issues, rollback strategies, and other considerations you might have missed." <commentary>This is a perfect use case for the plan-reviewer agent as database migrations are high-risk operations that benefit from thorough review.</commentary></example>