Angular Modern This document provides comprehensive guidelines for angular modern development and best practices. Component Development OnPush OnPush change detection strategy Implement proper onpush change detection strategy Follow best practices for optimal results Input/Output Input/Output decorators for communication Implement proper input/output decorators for communication Follow best practices for optimal results ViewChild ViewChild and ContentChild for DOM access Implement proper viewchild and contentchild for dom access Follow best practices for optimal results Lifecycle Lifecycle hooks implementation Implement proper lifecycle hooks implementation Follow best practices for optimal results Reactive Reactive forms with FormBuilder Implement proper reactive forms with formbuilder Follow best practices for optimal results Routing & Navigation Angular Angular Router with lazy loading Implement proper angular router with lazy loading Follow best practices for optimal results Route Route guards for authentication Implement proper route guards for authentication Follow best practices for optimal results Resolver Resolver for data preloading Implement proper resolver for data preloading Follow best practices for optimal results Nested Nested routes and child components Implement proper nested routes and child components Follow best practices for optimal results Route Route parameters and query strings Implement proper route parameters and query strings Follow best practices for optimal results Forms & Validation Reactive Reactive forms with FormGroup/FormControl Implement proper reactive forms with formgroup/formcontrol Follow best practices for optimal results Custom Custom validators Implement proper custom validators Follow best practices for optimal results Cross-field Cross-field validation Implement proper cross-field validation Follow best practices for optimal results Dynamic Dynamic form generation Implement proper dynamic form generation Follow best practices for optimal results Async Async validation Implement proper async validation Follow best practices for optimal results Performance Optimization OnPush OnPush change detection Implement proper onpush change detection Follow best practices for optimal results Lazy Lazy loading modules and components Implement proper lazy loading modules and components Follow best practices for optimal results Tree Tree shaking and bundle optimization Implement proper tree shaking and bundle optimization Follow best practices for optimal results Image Image optimization with NgOptimizedImage Implement proper image optimization with ngoptimizedimage Follow best practices for optimal results Virtual Virtual scrolling for large lists Implement proper virtual scrolling for large lists Follow best practices for optimal results Build & Deployment Angular Angular CLI for project management Implement proper angular cli for project management Follow best practices for optimal results Environment Environment configurations Implement proper environment configurations Follow best practices for optimal results Bundle Bundle analysis and optimization Implement proper bundle analysis and optimization Follow best practices for optimal results PWA PWA features with service workers Implement proper pwa features with service workers Follow best practices for optimal results Docker Docker containerization Implement proper docker containerization Follow best practices for optimal results Summary Checklist [ ] Core principles implemented [ ] Best practices followed [ ] Performance optimized [ ] Security measures in place [ ] Testing strategy implemented [ ] Documentation completed [ ] Monitoring configured [ ] Production deployment ready Follow these comprehensive guidelines for successful angular modern implementation.

Svelte Sveltekit This document provides comprehensive guidelines for svelte sveltekit development and best practices. Component Development Single-file Single-file components (.svelte) Implement proper single-file components (.svelte) Follow best practices for optimal results Props Props for parent-child communication Implement proper props for parent-child communication Follow best practices for optimal results Event Event dispatching with createEventDispatcher Implement proper event dispatching with createeventdispatcher Follow best practices for optimal results Slots Slots for content projection Implement proper slots for content projection Follow best practices for optimal results Context Context API for data sharing Implement proper context api for data sharing Follow best practices for optimal results SvelteKit Features File-based File-based routing system Implement proper file-based routing system Follow best practices for optimal results Server-side Server-side rendering (SSR) Implement proper server-side rendering (ssr) Follow best practices for optimal results Static Static site generation (SSG) Implement proper static site generation (ssg) Follow best practices for optimal results API API routes with +page.server.js Implement proper api routes with +page.server.js Follow best practices for optimal results Load Load functions for data fetching Implement proper load functions for data fetching Follow best practices for optimal results Forms & Data Form Form actions with +page.server.js Implement proper form actions with +page.server.js Follow best practices for optimal results Progressive Progressive enhancement Implement proper progressive enhancement Follow best practices for optimal results Form Form validation Implement proper form validation Follow best practices for optimal results File File uploads Implement proper file uploads Follow best practices for optimal results Real-time Real-time form updates Implement proper real-time form updates Follow best practices for optimal results Performance Automatic Automatic code splitting Implement proper automatic code splitting Follow best practices for optimal results Preloading Preloading for faster navigation Implement proper preloading for faster navigation Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Bundle Bundle analysis Implement proper bundle analysis Follow best practices for optimal results Service Service workers for caching Implement proper service workers for caching Follow best practices for optimal results Advanced Features Server-side Server-side components Implement proper server-side components Follow best practices for optimal results Streaming Streaming with async iterables Implement proper streaming with async iterables Follow best practices for optimal results WebSocket WebSocket integration Implement proper websocket integration Follow best practices for optimal results Real-time Real-time features Implement proper real-time features Follow best practices for optimal results Progressive Progressive web app capabilities Implement proper progressive web app capabilities Follow best practices for optimal results TypeScript Integration Full Full TypeScript support Implement proper full typescript support Follow best practices for optimal results Type-safe Type-safe stores Implement proper type-safe stores Follow best practices for optimal results Component Component prop types Implement proper component prop types Follow best practices for optimal results API API route typing Implement proper api route typing Follow best practices for optimal results Generic Generic components Implement proper generic components Follow best practices for optimal results Follow these comprehensive guidelines for successful svelte sveltekit implementation.

Webgl Threejs This document provides comprehensive guidelines for webgl threejs development and best practices. Geometry & Meshes Built-in Built-in geometries (Box, Sphere, Plane, Cylinder) Implement proper built-in geometries (box, sphere, plane, cylinder) Follow best practices for optimal results Custom Custom geometry creation with BufferGeometry Implement proper custom geometry creation with buffergeometry Follow best practices for optimal results Vertex Vertex positions, normals, and UV coordinates Implement proper vertex positions, normals, and uv coordinates Follow best practices for optimal results Geometry Geometry merging and optimization Implement proper geometry merging and optimization Follow best practices for optimal results Instanced Instanced rendering for performance Implement proper instanced rendering for performance Follow best practices for optimal results Camera Control Perspective Perspective and Orthographic cameras Implement proper perspective and orthographic cameras Follow best practices for optimal results Camera Camera movements and animations Implement proper camera movements and animations Follow best practices for optimal results OrbitControls OrbitControls for user interaction Implement proper orbitcontrols for user interaction Follow best practices for optimal results FirstPersonControls FirstPersonControls for navigation Implement proper firstpersoncontrols for navigation Follow best practices for optimal results Custom Custom camera behavior implementation Implement proper custom camera behavior implementation Follow best practices for optimal results Lighting & Shadows Shadow Shadow mapping setup and optimization Implement proper shadow mapping setup and optimization Follow best practices for optimal results Light Light types and properties Implement proper light types and properties Follow best practices for optimal results Global Global illumination techniques Implement proper global illumination techniques Follow best practices for optimal results Environment Environment mapping and HDR Implement proper environment mapping and hdr Follow best practices for optimal results Tone Tone mapping and exposure Implement proper tone mapping and exposure Follow best practices for optimal results Interaction & Physics Raycasting Raycasting for object picking Implement proper raycasting for object picking Follow best practices for optimal results Mouse Mouse and touch interaction handling Implement proper mouse and touch interaction handling Follow best practices for optimal results Physics Physics engine integration (Cannon.js, Ammo.js) Implement proper physics engine integration (cannon.js, ammo.js) Follow best practices for optimal results Collision Collision detection systems Implement proper collision detection systems Follow best practices for optimal results Interactive Interactive 3D UI elements Implement proper interactive 3d ui elements Follow best practices for optimal results Advanced Features Particle Particle systems and effects Implement proper particle systems and effects Follow best practices for optimal results Water Water and fluid simulations Implement proper water and fluid simulations Follow best practices for optimal results Terrain Terrain generation and rendering Implement proper terrain generation and rendering Follow best practices for optimal results Virtual Virtual and Augmented Reality (WebXR) Implement proper virtual and augmented reality (webxr) Follow best practices for optimal results Procedural Procedural generation techniques Implement proper procedural generation techniques Follow best practices for optimal results Deployment Bundle Bundle optimization for web Implement proper bundle optimization for web Follow best practices for optimal results Progressive Progressive loading strategies Implement proper progressive loading strategies Follow best practices for optimal results Mobile Mobile device optimization Implement proper mobile device optimization Follow best practices for optimal results WebGL WebGL compatibility checking Implement proper webgl compatibility checking Follow best practices for optimal results Cross-browser Cross-browser testing Implement proper cross-browser testing Follow best practices for optimal results Follow these comprehensive guidelines for successful webgl threejs implementation.

Vue 3 Composition API Best Practices Comprehensive guide for mastering Vue 3's Composition API, reactivity system, and building scalable Vue applications. Advanced Reactivity Patterns Computed Properties and Watchers Use computed for derived state that depends on reactive data Implement watchers for side effects and complex reactions Understand when to use watch vs watchEffect Example advanced reactivity: Custom Composables Design Create reusable logic with custom composables Follow naming conventions (use prefix) Implement proper cleanup and lifecycle management Example composable patterns: Performance Optimization Techniques Use shallow reactive when deep reactivity isn't needed Implement proper component lazy loading Optimize large list rendering with virtual scrolling Example performance patterns: State Management and Routing Pinia State Management Use Pinia for global state management Implement proper store composition patterns Handle async operations in stores Example Pinia store: Vue Router 4 Integration Use the composition API with Vue Router Implement proper route guards and navigation Handle route parameters and query strings Example router integration: Summary Checklist [ ] Use script setup syntax for cleaner component code [ ] Implement proper reactivity with ref() and reactive() [ ] Create reusable logic with custom composables [ ] Use TypeScript for type safety throughout [ ] Implement proper computed and watcher patterns [ ] Design clear prop and emit interfaces [ ] Use provide/inject for dependency injection [ ] Integrate Pinia for global state management [ ] Handle routing with Vue Router 4 composition API [ ] Optimize performance with shallow reactivity when appropriate [ ] Write comprehensive tests for composables and components [ ] Follow Vue 3 best practices and conventions Follow these patterns to build scalable, maintainable, and performant Vue 3 applications using the Composition API effectively.

TypeScript Expert Best Practices Comprehensive guide for mastering TypeScript's advanced type system, generics, and building type-safe applications at scale. Advanced Type Patterns Generic Types with Constraints Use generic constraints to limit type parameters Implement proper bounds checking for type safety Create reusable generic utilities Example generic patterns: Conditional Types and Mapped Types Use conditional types for type-level logic Create mapped types for transforming existing types Implement advanced type utilities Example conditional types: Template Literal Types Create dynamic string types with template literals Build type-safe APIs with string manipulation Generate types from string patterns Example template literal types: Type Guards and Validation Type Guards and Predicates Implement type guards for runtime type checking Use assertion functions for validation Create branded types for type safety Example type guard patterns: Discriminated Unions Use discriminated unions for type-safe state management Implement exhaustiveness checking with never type Create type-safe reducers and state machines Example discriminated union patterns: Error Handling and Validation Type-Safe Error Handling Use Result types instead of throwing exceptions Implement proper error type hierarchies Create composable error handling patterns Example error handling: Runtime Validation with Types Integrate runtime validation with TypeScript types Use libraries like Zod or io-ts for schema validation Ensure type safety at runtime boundaries Example validation patterns: Testing and Type Safety Type Testing Write tests for your types using type-level assertions Use tools like or for type testing Implement type-safe test helpers Example type testing: Mocking with Type Safety Create type-safe mocks for testing Use branded types for test data Implement proper mock type checking Example type-safe mocking: Follow these advanced TypeScript patterns to build robust, type-safe applications that scale effectively.

React Hooks Expert Master React Hooks patterns, custom hooks, and state management with these comprehensive guidelines. Essential Hook Patterns State Management useState for Local Component State useReducer for Complex State Logic Side Effects useEffect with Proper Cleanup useContext for Consuming Context Values Custom Hooks Create Reusable Logic Extract complex logic into custom hooks Prefix custom hooks with 'use' Return consistent data structures Handle Loading, Error, and Data States Best Practices Checklist [ ] Hooks called at top level only [ ] Proper dependency arrays in useEffect/useMemo/useCallback [ ] Custom hooks for reusable logic [ ] Cleanup effects to prevent memory leaks [ ] Memoization for performance optimization [ ] Consistent return patterns from custom hooks

Tailwind CSS Best Practices Complete guide for building responsive, accessible, and maintainable user interfaces with Tailwind CSS utility-first framework. Spacing and Layout Spacing Scale Mastery Use consistent spacing units: , , , Understand the scale: , , Use logical properties: (padding-inline-start), (margin-inline-start) Example spacing patterns: Layout Patterns Use Flexbox utilities for one-dimensional layouts Use Grid utilities for two-dimensional layouts Implement common patterns: navbar, sidebar, card grids Example layout structures: Container and Breakpoint Strategy Use class for responsive max-widths Implement proper padding: Understand breakpoint values: sm (640px), md (768px), lg (1024px), xl (1280px) Component Patterns Button Components Create consistent button styles with variants Include hover, focus, and disabled states Implement proper accessibility attributes Example button patterns: Form Elements Style inputs, selects, and textareas consistently Include focus states and validation styling Implement proper spacing and alignment Example form patterns: Card Components Design flexible card layouts for different content types Include proper shadows, borders, and spacing Make cards responsive and accessible Example card patterns: Performance Optimization Production Build Optimization Configure PurgeCSS to remove unused styles Use JIT mode for optimal bundle size Monitor CSS bundle size in production Example Tailwind config: Component Extraction Strategy Extract repeating patterns into components (React, Vue, etc.) Use sparingly for truly reusable component classes Keep utility-first approach even within components Example component extraction: Advanced Patterns Grid and Layout Systems Master CSS Grid utilities for complex layouts Implement responsive grid patterns Use subgrid when browser support allows Example advanced grid: Custom Plugin Development Create custom plugins for project-specific utilities Extend Tailwind's functionality when needed Maintain consistency with Tailwind's naming conventions Example custom plugin: Follow these practices to build beautiful, responsive, and maintainable user interfaces with Tailwind CSS.

Angular Standalone Components Best Practices Comprehensive guide for building modern Angular applications with standalone components, signals, and the latest Angular patterns. Modern Template Syntax Control Flow with @if, @for, @switch Use new control flow syntax instead of structural directives Implement proper track functions for @for loops Handle empty states and loading conditions Example control flow patterns: Reactive Forms with Signals Integrate reactive forms with signal-based state Implement form validation with signals Handle form submission and errors Example form integration: Routing and Navigation Functional Route Guards Use functional guards instead of class-based guards Implement route protection with signals Handle navigation state reactively Example functional guards: Lazy Loading with Standalone Components Implement route-level code splitting Load components and features on demand Optimize bundle size with lazy loading Example lazy loading setup: Summary Checklist [ ] Use standalone components to eliminate NgModule boilerplate [ ] Leverage inject() function for dependency injection [ ] Implement signals for reactive state management [ ] Use new control flow syntax (@if, @for, @switch) [ ] Create computed signals for derived state [ ] Implement functional route guards and resolvers [ ] Use lazy loading for optimal bundle size [ ] Write comprehensive tests for components and services [ ] Handle form state with reactive forms and signals [ ] Implement proper error handling and loading states [ ] Use signal inputs and function outputs for component communication [ ] Create reactive services with signal-based state Follow these patterns to build modern, performant Angular applications using standalone components and the latest Angular features.

SolidJS Best Practices Comprehensive guide for building high-performance web applications with SolidJS, featuring fine-grained reactivity, signals, and optimized rendering. State Management with Stores Creating and Using Stores Implement global state with stores Use context for dependency injection Create reactive store patterns Example store implementation: Resource Pattern for Data Fetching Use createResource for async data fetching Implement proper loading and error states Handle data refetching and caching Example resource patterns: Performance Optimization Compilation and Bundle Optimization Leverage SolidJS's compile-time optimizations Use lazy loading for code splitting Implement proper bundling strategies Example optimization techniques: Memory Management and Cleanup Properly clean up effects and subscriptions Use onCleanup for resource disposal Handle component unmounting gracefully Example cleanup patterns: Summary Checklist [ ] Use signals for reactive state management [ ] Leverage createMemo for derived computations [ ] Implement proper component composition with splitProps [ ] Use SolidJS control flow components (Show, For, Switch) [ ] Create stores for global state management [ ] Use createResource for async data fetching [ ] Implement client-side routing with Solid Router [ ] Use lazy loading for code splitting and performance [ ] Properly clean up effects and subscriptions [ ] Write comprehensive tests for components and stores [ ] Optimize bundle size with tree shaking [ ] Handle error boundaries and loading states [ ] Use TypeScript for better development experience [ ] Implement proper accessibility patterns Follow these practices to build high-performance, reactive web applications with SolidJS's fine-grained reactivity system.

SvelteKit Best Practices Comprehensive guide for building full-stack web applications with SvelteKit, including routing, stores, SSR, and modern development patterns. State Management with Stores Svelte Stores for Global State Use writable stores for mutable state Implement derived stores for computed values Create custom stores for complex logic Example store implementations: Custom Stores for Complex State Create domain-specific stores Implement store composition patterns Handle async operations in stores Example custom store: Store Persistence and Synchronization Persist store state across sessions Sync stores with server state Handle offline scenarios Example persistence patterns: API Routes and Server-Side Logic API Route Implementation Create RESTful API endpoints Handle different HTTP methods Implement proper error handling and validation Example API routes: Authentication and Authorization Hooks Implement server-side authentication Create authorization middleware Handle session management Example authentication setup: Summary Checklist [ ] Use file-based routing for automatic route generation [ ] Implement load functions for server-side data fetching [ ] Create reactive stores for global state management [ ] Use derived stores for computed values [ ] Build reusable components with proper event handling [ ] Implement form validation with reactive statements [ ] Create RESTful API routes with proper error handling [ ] Set up authentication and authorization hooks [ ] Use proper TypeScript types throughout the application [ ] Implement lazy loading and code splitting [ ] Write comprehensive tests for components and stores [ ] Handle loading states and errors gracefully [ ] Use SSR and prerendering for performance [ ] Implement proper SEO and meta tag management Follow these practices to build fast, scalable, and maintainable full-stack web applications with SvelteKit.

Vue 3 Composition API Best Practices Setup Function and Script Setup Basic Composition API Setup Script Setup Syntax (Recommended) Reactive State Management Ref vs Reactive Reactive Arrays and Objects Composables for Logic Reuse Creating Custom Composables Fetch Data Composable Local Storage Composable Using Composables in Components Advanced Reactive Patterns Watch and WatchEffect Provide/Inject for State Management TypeScript Integration Typed Composables Typed Component Props Performance Optimization Reactive Performance Tips Optimized List Rendering Testing Composition API Unit Testing Composables Testing Components with Composition API Checklist for Vue 3 Composition API [ ] Use script setup syntax for cleaner code [ ] Choose ref vs reactive appropriately [ ] Create reusable composables for common logic [ ] Implement proper TypeScript types [ ] Use provide/inject for cross-component state [ ] Optimize performance with shallow reactivity when needed [ ] Write comprehensive tests for composables [ ] Follow naming conventions (use* prefix for composables) [ ] Handle cleanup in composables (onUnmounted) [ ] Document complex composables with JSDoc [ ] Use computed properties for derived state [ ] Implement proper error handling in async composables