frontend-dev-guidelines

Malicious tool definition detected

Tool: SKILL.md [1/2] Description: --- name: frontend-dev-guidelines description: Frontend development guidelines for React/TypeScript applications.

Tool: SKILL.md [2/2] Description: Navigation Guide | Need to...

Malicious tool definition detected

Tool: resources/common-patterns.md Description: # Common Patterns Frequently used patterns for forms, authentication, DataGrid, dialogs, and other common UI elements.

Malicious tool definition detected

Tool: resources/complete-examples.md [1/3] Description: # Complete Examples Full working examples combining all modern patterns: React.FC, lazy loading, Suspense, useSuspenseQuery, styling, routing, and error handling.

Tool: resources/complete-examples.md [2/3] Description: with Validation ```typescript import React from 'react'; import { Box, TextField, Button, Paper } from '@mui/material'; import { useBlog } from 'react-hook-blog'; import { zodResolver } from '@hookblog/resolvers/zod'; import { z } from 'zod'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { userApi } from '../api/userApi'; import { useMuiSnackbar } from '@/hooks/useMuiSnackbar'; const userSchema = z.object({ use

Tool: resources/complete-examples.md [3/3] Description: 12, md: 4 }}> <Paper sx={{ p: 2 }}> <h3>Active Users</h3> <p>Count: {usersQuery.data.length}</p> </Paper> </Grid> <Grid size={{ xs: 12, md: 4 }}> <Paper sx={{ p: 2 }}> <h3>Recent Activity</h3> <p>Events: {activityQuery.data.length}</p> </Paper> </Grid> </Grid> </Box> ); }; // Usage with Suspense <SuspenseLoader> <Dashboard /> </SuspenseLoader> ``` --- ## Example 7: Optimistic Update ```typescript import { useMutation, useQueryClient } from

Malicious tool definition detected

Tool: resources/component-patterns.md [1/2] Description: # Component Patterns Modern React component architecture for the application emphasizing type safety, lazy loading, and Suspense boundaries.

Tool: resources/component-patterns.md [2/2] Description: } export const Child: React.FC<ChildProps> = ({ data, onSelect }) => { return ( <div onClick={() => onSelect(data[0].id)}> {/* Content */} </div> ); }; ``` ### Avoid Prop Drilling **Use context for deep nesting:** ```typescript // ❌ AVOID - Prop drilling 5+ levels <A prop={x}> <B prop={x}> <C prop={x}> <D prop={x}> <E prop={x} /> // Finally uses it here </D> </C> </B> </A> // ✅ PREFERRED - Context or TanStack Query const MyContext = create

Malicious tool definition detected

Tool: resources/data-fetching.md [1/3] Description: # Data Fetching Patterns Modern data fetching using TanStack Query with Suspense boundaries, cache-first strategies, and centralized API services.

Tool: resources/data-fetching.md [2/3] Description: => { updateMutation.mutate({ name: 'New Name' }); }; return ( <Button onClick={handleUpdate} disabled={updateMutation.isPending} > {updateMutation.isPending ?

Tool: resources/data-fetching.md [3/3] Description: // 10 minutes (was cacheTime) refetchOnWindowFocus: false, // Don't refetch on focus refetchOnMount: false, // Don't refetch on mount if fresh retry: 1, // Retry failed queries once }, }, }); ``` ### Per-Query Overrides ```typescript // Frequently changing data - shorter staleTime useSuspenseQuery({ queryKey: ['notifications', 'unread'], queryFn: () => notificationApi.getUnread(), staleTime: 30 * 1000, // 30 seconds }); // Rarely changing data

Malicious tool definition detected

Tool: resources/file-organization.md [1/2] Description: # File Organization Proper file and directory structure for maintainable, scalable frontend code in the the application.

Tool: resources/file-organization.md [2/2] Description: User } from '~types/user'; // 5.

Malicious tool definition detected

Tool: resources/loading-and-error-states.md [1/2] Description: # Loading & Error States **CRITICAL**: Proper loading and error state handling prevents layout shift and provides better user experience.

Tool: resources/loading-and-error-states.md [2/2] Description: number }> = ({ id }) => { const queryClient = useQueryClient(); const { showSuccess, showError } = useMuiSnackbar(); const { data } = useSuspenseQuery({ queryKey: ['entity', id], queryFn: () => myFeatureApi.getEntity(id), onError: () => { showError('Failed to load entity'); }, }); const updateMutation = useMutation({ mutationFn: (updates) => myFeatureApi.update(id, updates), onSuccess: () => { queryClient.invalidateQueries({ queryKey

Malicious tool definition detected

Tool: resources/performance.md [1/2] Description: # Performance Optimization Patterns for optimizing React component performance, preventing unnecessary re-renders, and avoiding memory leaks.

Tool: resources/performance.md [2/2]

Malicious tool definition detected

Tool: resources/routing-guide.md Description: # Routing Guide TanStack Router implementation with folder-based routing and lazy loading patterns.

Malicious tool definition detected

Tool: resources/styling-guide.md [1/2] Description: # Styling Guide Modern styling patterns for using MUI v7 sx prop, inline styles, and theme integration.

Tool: resources/styling-guide.md [2/2]

Malicious tool definition detected

Tool: resources/typescript-standards.md [1/2]

Tool: resources/typescript-standards.md [2/2]