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:
New Feature Checklist
Creating a feature? Set up this structure:
Import Aliases Quick Reference
Alias
Resolves To
Example
@/src/import { apiClient } from '@/lib/apiClient'
~typessrc/typesimport type { User } from '~types/user'
~componentssrc/componentsimport { SuspenseLoader } from '~components/SuspenseLoader'
~featuressrc/featuresimport { authApi } from '~features/auth'
Defined in: vite.config.ts lines 180-185
Common Imports Cheatsheet
import React, { useState, useCallback, useMemo } from 'react' ;
const Heavy = React. lazy ( ( ) => import ( './Heavy' ) ) ;
import { Box, Paper, Typography, Button, Grid } from '@mui/material' ;
import type { SxProps, Theme } from '@mui/material' ;
import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query' ;
import { createFileRoute } from '@tanstack/react-router' ;
import { SuspenseLoader } from '~components/SuspenseLoader' ;
import { useAuth } from '@/hooks/useAuth' ;
import { useMuiSnackbar } from '@/hooks/useMuiSnackbar' ;
import type { Post } from '~types/post' ;
Topic Guides
🎨 Component Patterns
Modern React components use:
React.FC<Props> for type safetyReact.lazy() for code splittingSuspenseLoader for loading statesNamed 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
📊 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
📁 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
🎨 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:
< Grid size= { { xs: 12 , md: 6 } } >
< Grid xs= { 12 } md= { 6 } >
📖 Complete Guide: 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:
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
⏳ Loading & Error States
CRITICAL RULE: No Early Returns
if ( isLoading) {
return < LoadingSpinner / > ;
}
< 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
⚡ Performance
Optimization Patterns:
useMemo: Expensive computations (filter, sort, map)useCallback: Event handlers passed to childrenReact.memo: Expensive componentsDebounced search (300-500ms)
Memory leak prevention (cleanup in useEffect)
📖 Complete Guide: resources/performance.md
📘 TypeScript
Standards:
Strict mode, no any type
Explicit return types on functions
Type imports: import type { User } from '~types/user'
Component prop interfaces with JSDoc
📖 Complete Guide: resources/typescript-standards.md
🔧 Common Patterns
Covered Topics:
React Hook Form with Zod validation
DataGrid wrapper contracts
Dialog component standards
useAuth hook for current userMutation patterns with cache invalidation
📖 Complete Guide: resources/common-patterns.md
📚 Complete Examples
Full working examples:
Modern component with all patterns
Complete feature structure
API service layer
Route with lazy loading
Suspense + useSuspenseQuery
Form with validation
📖 Complete Guide: resources/complete-examples.md
Navigation Guide
Need to...
Read this resource
Create a component
component-patterns.md
Fetch data
data-fetching.md
Organize files/folders
file-organization.md
Style components
styling-guide.md
Set up routing
routing-guide.md
Handle loading/errors
loading-and-error-states.md
Optimize performance
performance.md
TypeScript types
typescript-standards.md
Forms/Auth/DataGrid
common-patterns.md
See full examples
Implementation Guide Prerequisites
› Claude Desktop or compatible AI client with skill support › Clear understanding of task or problem to solve › Willingness to iterate and refine outputs Time Estimate
15-45 minutes depending on use case complexity
Steps
1 Install skill using provided installation command 2 Test with simple use case relevant to your work 3 Evaluate output quality and relevance 4 Iterate on prompts to improve results 5 Integrate into regular workflow if valuable Common Pitfalls
⚠ Expecting perfect results without iteration ⚠ Not providing enough context in prompts ⚠ Using skill for tasks outside its intended scope ⚠ Accepting outputs without review and validation Best Practices ✓ Do
+ Start with clear, specific prompts + Provide relevant context and constraints + Review and refine all outputs before using + Iterate to improve output quality + Document successful prompt patterns ✗ Don't
− Don't use without understanding skill limitations − Don't skip validation of outputs − Don't share sensitive information in prompts − Don't expect skill to replace human judgment 💡 Pro Tips
★ Be specific about desired format and style ★ Ask for multiple options to choose from ★ Request explanations to understand reasoning ★ Combine AI efficiency with human expertise When to Use This ✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path 1 Familiarize yourself with skill capabilities and limitations 2 Start with low-risk, non-critical tasks 3 Progress to more complex and valuable use cases 4 Build expertise through regular use and experimentation Reviews 4.8 ★ ★ ★ ★ ★ 34 reviews
N
Neel Chawla ★ ★ ★ ★ ★ Dec 24, 2024
We added frontend-dev-guidelines from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
K
Kofi Bhatia ★ ★ ★ ★ ★ Dec 24, 2024
Keeps context tight: frontend-dev-guidelines is the kind of skill you can hand to a new teammate without a long onboarding doc.
A
Ama Okafor ★ ★ ★ ★ ★ Dec 4, 2024
Registry listing for frontend-dev-guidelines matched our evaluation — installs cleanly and behaves as described in the markdown.
R
Rahul Santra ★ ★ ★ ★ ★ Nov 27, 2024
I recommend frontend-dev-guidelines for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Y
Yuki Verma ★ ★ ★ ★ ★ Nov 23, 2024
I recommend frontend-dev-guidelines for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
C
Chinedu Ndlovu ★ ★ ★ ★ ★ Nov 23, 2024
frontend-dev-guidelines fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
C
Chinedu Farah ★ ★ ★ ★ ★ Nov 15, 2024
frontend-dev-guidelines reduced setup friction for our internal harness; good balance of opinion and flexibility.
D
Dev Torres ★ ★ ★ ★ ★ Nov 15, 2024
frontend-dev-guidelines has been reliable in day-to-day use. Documentation quality is above average for community skills.
P
Pratham Ware ★ ★ ★ ★ ★ Oct 18, 2024
Useful defaults in frontend-dev-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
H
Hassan Harris ★ ★ ★ ★ ★ Oct 14, 2024
Useful defaults in frontend-dev-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
showing 1-10 of 34
prev 1 / 4 next
Discussion Comments — not star reviews No comments yet — start the thread.
