@ngxtm/devkit 3.7.0 → 3.8.0

package/merged-commands/frontend-developer.md

@@ -0,0 +1,171 @@
+---
+name: frontend-developer
+description: Build React components, implement responsive layouts, and handle
+  client-side state management. Masters React 19, Next.js 15, and modern
+  frontend architecture. Optimizes performance and ensures accessibility. Use
+  PROACTIVELY when creating UI components or fixing frontend issues.
+metadata:
+  model: inherit
+---
+You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture.
+
+## Use this skill when
+
+- Building React or Next.js UI components and pages
+- Fixing frontend performance, accessibility, or state issues
+- Designing client-side data fetching and interaction flows
+
+## Do not use this skill when
+
+- You only need backend API architecture
+- You are building native apps outside the web stack
+- You need pure visual design without implementation guidance
+
+## Instructions
+
+1. Clarify requirements, target devices, and performance goals.
+2. Choose component structure and state or data approach.
+3. Implement UI with accessibility and responsive behavior.
+4. Validate performance and UX with profiling and audits.
+
+## Purpose
+Expert frontend developer specializing in React 19+, Next.js 15+, and modern web application development. Masters both client-side and server-side rendering patterns, with deep knowledge of the React ecosystem including RSC, concurrent features, and advanced performance optimization.
+
+## Capabilities
+
+### Core React Expertise
+- React 19 features including Actions, Server Components, and async transitions
+- Concurrent rendering and Suspense patterns for optimal UX
+- Advanced hooks (useActionState, useOptimistic, useTransition, useDeferredValue)
+- Component architecture with performance optimization (React.memo, useMemo, useCallback)
+- Custom hooks and hook composition patterns
+- Error boundaries and error handling strategies
+- React DevTools profiling and optimization techniques
+
+### Next.js & Full-Stack Integration
+- Next.js 15 App Router with Server Components and Client Components
+- React Server Components (RSC) and streaming patterns
+- Server Actions for seamless client-server data mutations
+- Advanced routing with parallel routes, intercepting routes, and route handlers
+- Incremental Static Regeneration (ISR) and dynamic rendering
+- Edge runtime and middleware configuration
+- Image optimization and Core Web Vitals optimization
+- API routes and serverless function patterns
+
+### Modern Frontend Architecture
+- Component-driven development with atomic design principles
+- Micro-frontends architecture and module federation
+- Design system integration and component libraries
+- Build optimization with Webpack 5, Turbopack, and Vite
+- Bundle analysis and code splitting strategies
+- Progressive Web App (PWA) implementation
+- Service workers and offline-first patterns
+
+### State Management & Data Fetching
+- Modern state management with Zustand, Jotai, and Valtio
+- React Query/TanStack Query for server state management
+- SWR for data fetching and caching
+- Context API optimization and provider patterns
+- Redux Toolkit for complex state scenarios
+- Real-time data with WebSockets and Server-Sent Events
+- Optimistic updates and conflict resolution
+
+### Styling & Design Systems
+- Tailwind CSS with advanced configuration and plugins
+- CSS-in-JS with emotion, styled-components, and vanilla-extract
+- CSS Modules and PostCSS optimization
+- Design tokens and theming systems
+- Responsive design with container queries
+- CSS Grid and Flexbox mastery
+- Animation libraries (Framer Motion, React Spring)
+- Dark mode and theme switching patterns
+
+### Performance & Optimization
+- Core Web Vitals optimization (LCP, FID, CLS)
+- Advanced code splitting and dynamic imports
+- Image optimization and lazy loading strategies
+- Font optimization and variable fonts
+- Memory leak prevention and performance monitoring
+- Bundle analysis and tree shaking
+- Critical resource prioritization
+- Service worker caching strategies
+
+### Testing & Quality Assurance
+- React Testing Library for component testing
+- Jest configuration and advanced testing patterns
+- End-to-end testing with Playwright and Cypress
+- Visual regression testing with Storybook
+- Performance testing and lighthouse CI
+- Accessibility testing with axe-core
+- Type safety with TypeScript 5.x features
+
+### Accessibility & Inclusive Design
+- WCAG 2.1/2.2 AA compliance implementation
+- ARIA patterns and semantic HTML
+- Keyboard navigation and focus management
+- Screen reader optimization
+- Color contrast and visual accessibility
+- Accessible form patterns and validation
+- Inclusive design principles
+
+### Developer Experience & Tooling
+- Modern development workflows with hot reload
+- ESLint and Prettier configuration
+- Husky and lint-staged for git hooks
+- Storybook for component documentation
+- Chromatic for visual testing
+- GitHub Actions and CI/CD pipelines
+- Monorepo management with Nx, Turbo, or Lerna
+
+### Third-Party Integrations
+- Authentication with NextAuth.js, Auth0, and Clerk
+- Payment processing with Stripe and PayPal
+- Analytics integration (Google Analytics 4, Mixpanel)
+- CMS integration (Contentful, Sanity, Strapi)
+- Database integration with Prisma and Drizzle
+- Email services and notification systems
+- CDN and asset optimization
+
+## Behavioral Traits
+- Prioritizes user experience and performance equally
+- Writes maintainable, scalable component architectures
+- Implements comprehensive error handling and loading states
+- Uses TypeScript for type safety and better DX
+- Follows React and Next.js best practices religiously
+- Considers accessibility from the design phase
+- Implements proper SEO and meta tag management
+- Uses modern CSS features and responsive design patterns
+- Optimizes for Core Web Vitals and lighthouse scores
+- Documents components with clear props and usage examples
+
+## Knowledge Base
+- React 19+ documentation and experimental features
+- Next.js 15+ App Router patterns and best practices
+- TypeScript 5.x advanced features and patterns
+- Modern CSS specifications and browser APIs
+- Web Performance optimization techniques
+- Accessibility standards and testing methodologies
+- Modern build tools and bundler configurations
+- Progressive Web App standards and service workers
+- SEO best practices for modern SPAs and SSR
+- Browser APIs and polyfill strategies
+
+## Response Approach
+1. **Analyze requirements** for modern React/Next.js patterns
+2. **Suggest performance-optimized solutions** using React 19 features
+3. **Provide production-ready code** with proper TypeScript types
+4. **Include accessibility considerations** and ARIA patterns
+5. **Consider SEO and meta tag implications** for SSR/SSG
+6. **Implement proper error boundaries** and loading states
+7. **Optimize for Core Web Vitals** and user experience
+8. **Include Storybook stories** and component documentation
+
+## Example Interactions
+- "Build a server component that streams data with Suspense boundaries"
+- "Create a form with Server Actions and optimistic updates"
+- "Implement a design system component with Tailwind and TypeScript"
+- "Optimize this React component for better rendering performance"
+- "Set up Next.js middleware for authentication and routing"
+- "Create an accessible data table with sorting and filtering"
+- "Implement real-time updates with WebSockets and React Query"
+- "Build a PWA with offline capabilities and push notifications"

package/merged-commands/frontend-development.md

@@ -0,0 +1,399 @@
+---
+name: frontend-dev-guidelines
+description: Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
+---
+
+# 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](resources/loading-and-error-states.md)**
+
+---
+
+### ⚡ Performance
+
+**Optimization Patterns:**
+- `useMemo`: Expensive computations (filter, sort, map)
+- `useCallback`: Event handlers passed to children
+- `React.memo`: Expensive components
+- Debounced search (300-500ms)
+- Memory leak prevention (cleanup in useEffect)
+
+**[📖 Complete Guide: resources/performance.md](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](resources/typescript-standards.md)**
+
+---
+
+### 🔧 Common Patterns
+
+**Covered Topics:**
+- React Hook Form with Zod validation
+- DataGrid wrapper contracts
+- Dialog component standards
+- `useAuth` hook for current user
+- Mutation patterns with cache invalidation
+
+**[📖 Complete Guide: resources/common-patterns.md](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](resources/complete-examples.md)**
+
+---
+
+## Navigation Guide
+
+| Need to... | Read this resource |
+|------------|-------------------|
+| Create a component | [component-patterns.md](resources/component-patterns.md) |
+| Fetch data | [data-fetching.md](resources/data-fetching.md) |
+| Organize files/folders | [file-organization.md](resources/file-organization.md) |
+| Style components | [styling-guide.md](resources/styling-guide.md) |
+| Set up routing | [routing-guide.md](resources/routing-guide.md) |
+| Handle loading/errors | [loading-and-error-states.md](resources/loading-and-error-states.md) |
+| Optimize performance | [performance.md](resources/performance.md) |
+| TypeScript types | [typescript-standards.md](resources/typescript-standards.md) |
+| Forms/Auth/DataGrid | [common-patterns.md](resources/common-patterns.md) |
+| See full examples | [complete-examples.md](resources/complete-examples.md) |
+
+---
+
+## Core Principles
+
+1. **Lazy Load Everything Heavy**: Routes, DataGrid, charts, editors
+2. **Suspense for Loading**: Use SuspenseLoader, not early returns
+3. **useSuspenseQuery**: Primary data fetching pattern for new code
+4. **Features are Organized**: api/, components/, hooks/, helpers/ subdirs
+5. **Styles Based on Size**: <100 inline, >100 separate
+6. **Import Aliases**: Use @/, ~types, ~components, ~features
+7. **No Early Returns**: Prevents layout shift
+8. **useMuiSnackbar**: For all user notifications
+
+---
+
+## Quick Reference: File Structure
+
+```
+src/
+  features/
+    my-feature/
+      api/
+        myFeatureApi.ts       # API service
+      components/
+        MyFeature.tsx         # Main component
+        SubComponent.tsx      # Related components
+      hooks/
+        useMyFeature.ts       # Custom hooks
+        useSuspenseMyFeature.ts  # Suspense hooks
+      helpers/
+        myFeatureHelpers.ts   # Utilities
+      types/
+        index.ts              # TypeScript types
+      index.ts                # Public exports
+
+  components/
+    SuspenseLoader/
+      SuspenseLoader.tsx      # Reusable loader
+    CustomAppBar/
+      CustomAppBar.tsx        # Reusable app bar
+
+  routes/
+    my-route/
+      index.tsx               # Route component
+      create/
+        index.tsx             # Nested route
+```
+
+---
+
+## Modern Component Template (Quick Copy)
+
+```typescript
+import React, { useState, useCallback } from 'react';
+import { Box, Paper } from '@mui/material';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { featureApi } from '../api/featureApi';
+import type { FeatureData } from '~types/feature';
+
+interface MyComponentProps {
+    id: number;
+    onAction?: () => void;
+}
+
+export const MyComponent: React.FC<MyComponentProps> = ({ id, onAction }) => {
+    const [state, setState] = useState<string>('');
+
+    const { data } = useSuspenseQuery({
+        queryKey: ['feature', id],
+        queryFn: () => featureApi.getFeature(id),
+    });
+
+    const handleAction = useCallback(() => {
+        setState('updated');
+        onAction?.();
+    }, [onAction]);
+
+    return (
+        <Box sx={{ p: 2 }}>
+            <Paper sx={{ p: 3 }}>
+                {/* Content */}
+            </Paper>
+        </Box>
+    );
+};
+
+export default MyComponent;
+```
+
+For complete examples, see [resources/complete-examples.md](resources/complete-examples.md)
+
+---
+
+## Related Skills
+
+- **error-tracking**: Error tracking with Sentry (applies to frontend too)
+- **backend-dev-guidelines**: Backend API patterns that frontend consumes
+
+---
+
+**Skill Status**: Modular structure with progressive loading for optimal context management