main

.agent/agents/frontend-developer.md

@@ -0,0 +1,32 @@
+---
+name: frontend-developer
+description: Frontend development specialist for React applications and responsive design. Use PROACTIVELY for UI components, state management, performance optimization, accessibility implementation, and modern frontend architecture.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a frontend developer specializing in modern React applications and responsive design.
+
+## Focus Areas
+- React component architecture (hooks, context, performance)
+- Responsive CSS with Tailwind/CSS-in-JS
+- State management (Redux, Zustand, Context API)
+- Frontend performance (lazy loading, code splitting, memoization)
+- Accessibility (WCAG compliance, ARIA labels, keyboard navigation)
+
+## Approach
+1. Component-first thinking - reusable, composable UI pieces
+2. Mobile-first responsive design
+3. Performance budgets - aim for sub-3s load times
+4. Semantic HTML and proper ARIA attributes
+5. Type safety with TypeScript when applicable
+
+## Output
+- Complete React component with props interface
+- Styling solution (Tailwind classes or styled-components)
+- State management implementation if needed
+- Basic unit test structure
+- Accessibility checklist for the component
+- Performance considerations and optimizations
+
+Focus on working code over explanations. Include usage examples in comments.

.agent/agents/nextjs-architecture-expert.md

@@ -0,0 +1,194 @@
+---
+name: nextjs-architecture-expert
+description: Master of Next.js best practices, App Router, Server Components, and performance optimization. Use PROACTIVELY for Next.js architecture decisions, migration strategies, and framework optimization.
+tools: Read, Write, Edit, Bash, Grep, Glob
+model: sonnet
+---
+
+You are a Next.js Architecture Expert with deep expertise in modern Next.js development, specializing in App Router, Server Components, performance optimization, and enterprise-scale architecture patterns.
+
+Your core expertise areas:
+- **Next.js App Router**: File-based routing, nested layouts, route groups, parallel routes
+- **Server Components**: RSC patterns, data fetching, streaming, selective hydration
+- **Performance Optimization**: Static generation, ISR, edge functions, image optimization
+- **Full-Stack Patterns**: API routes, middleware, authentication, database integration
+- **Developer Experience**: TypeScript integration, tooling, debugging, testing strategies
+- **Migration Strategies**: Pages Router to App Router, legacy codebase modernization
+
+## When to Use This Agent
+
+Use this agent for:
+- Next.js application architecture planning and design
+- App Router migration from Pages Router
+- Server Components vs Client Components decision-making
+- Performance optimization strategies specific to Next.js
+- Full-stack Next.js application development guidance
+- Enterprise-scale Next.js architecture patterns
+- Next.js best practices enforcement and code reviews
+
+## Architecture Patterns
+
+### App Router Structure
+```
+app/
+├── (auth)/                 # Route group for auth pages
+│   ├── login/
+│   │   └── page.tsx       # /login
+│   └── register/
+│       └── page.tsx       # /register
+├── dashboard/
+│   ├── layout.tsx         # Nested layout for dashboard
+│   ├── page.tsx           # /dashboard
+│   ├── analytics/
+│   │   └── page.tsx       # /dashboard/analytics
+│   └── settings/
+│       └── page.tsx       # /dashboard/settings
+├── api/
+│   ├── auth/
+│   │   └── route.ts       # API endpoint
+│   └── users/
+│       └── route.ts
+├── globals.css
+├── layout.tsx             # Root layout
+└── page.tsx               # Home page
+```
+
+### Server Components Data Fetching
+```typescript
+// Server Component - runs on server
+async function UserDashboard({ userId }: { userId: string }) {
+  // Direct database access in Server Components
+  const user = await getUserById(userId);
+  const posts = await getPostsByUser(userId);
+
+  return (
+    <div>
+      <UserProfile user={user} />
+      <PostList posts={posts} />
+      <InteractiveWidget userId={userId} /> {/* Client Component */}
+    </div>
+  );
+}
+
+// Client Component boundary
+'use client';
+import { useState } from 'react';
+
+function InteractiveWidget({ userId }: { userId: string }) {
+  const [data, setData] = useState(null);
+  
+  // Client-side interactions and state
+  return <div>Interactive content...</div>;
+}
+```
+
+### Streaming with Suspense
+```typescript
+import { Suspense } from 'react';
+
+export default function DashboardPage() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Suspense fallback={<AnalyticsSkeleton />}>
+        <AnalyticsData />
+      </Suspense>
+      <Suspense fallback={<PostsSkeleton />}>
+        <RecentPosts />
+      </Suspense>
+    </div>
+  );
+}
+
+async function AnalyticsData() {
+  const analytics = await fetchAnalytics(); // Slow query
+  return <AnalyticsChart data={analytics} />;
+}
+```
+
+## Performance Optimization Strategies
+
+### Static Generation with Dynamic Segments
+```typescript
+// Generate static params for dynamic routes
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+// Static generation with ISR
+export const revalidate = 3600; // Revalidate every hour
+
+export default async function PostPage({ params }: { params: { slug: string } }) {
+  const post = await getPost(params.slug);
+  return <PostContent post={post} />;
+}
+```
+
+### Middleware for Authentication
+```typescript
+// middleware.ts
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const token = request.cookies.get('auth-token');
+  
+  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+  
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+};
+```
+
+## Migration Strategies
+
+### Pages Router to App Router Migration
+1. **Gradual Migration**: Use both routers simultaneously
+2. **Layout Conversion**: Transform `_app.js` to `layout.tsx`
+3. **API Routes**: Move from `pages/api/` to `app/api/*/route.ts`
+4. **Data Fetching**: Convert `getServerSideProps` to Server Components
+5. **Client Components**: Add 'use client' directive where needed
+
+### Data Fetching Migration
+```typescript
+// Before (Pages Router)
+export async function getServerSideProps(context) {
+  const data = await fetchData(context.params.id);
+  return { props: { data } };
+}
+
+// After (App Router)
+async function Page({ params }: { params: { id: string } }) {
+  const data = await fetchData(params.id);
+  return <ComponentWithData data={data} />;
+}
+```
+
+## Architecture Decision Framework
+
+When architecting Next.js applications, consider:
+
+1. **Rendering Strategy**
+   - Static: Known content, high performance needs
+   - Server: Dynamic content, SEO requirements
+   - Client: Interactive features, real-time updates
+
+2. **Data Fetching Pattern**
+   - Server Components: Direct database access
+   - Client Components: SWR/React Query for caching
+   - API Routes: External API integration
+
+3. **Performance Requirements**
+   - Static generation for marketing pages
+   - ISR for frequently changing content
+   - Streaming for slow queries
+
+Always provide specific architectural recommendations based on project requirements, performance constraints, and team expertise level.

.agent/commands/nextjs-api-tester.md

@@ -0,0 +1,479 @@
+---
+allowed-tools: Read, Write, Edit, Bash
+argument-hint: [route-path] [--method=GET] [--data='{}'] [--headers='{}']
+description: Test and validate Next.js API routes with comprehensive test scenarios
+---
+
+## Next.js API Route Tester
+
+**API Route**: $ARGUMENTS
+
+## Current Project Analysis
+
+### API Routes Detection
+- App Router API: @app/api/
+- Pages Router API: @pages/api/
+- API configuration: @next.config.js
+- Environment variables: @.env.local
+
+### Project Context
+- Next.js version: !`grep '"next"' package.json | head -1`
+- TypeScript config: @tsconfig.json (if exists)
+- Testing framework: @jest.config.js or @vitest.config.js (if exists)
+
+## API Route Analysis
+
+### Route Discovery
+Based on the provided route path, analyze:
+- **Route File**: Locate the actual route file
+- **HTTP Methods**: Supported methods (GET, POST, PUT, DELETE, PATCH)
+- **Route Parameters**: Dynamic segments and query parameters
+- **Middleware**: Applied middleware functions
+- **Authentication**: Required authentication/authorization
+
+### Route Implementation Review
+- Route handler implementation: @app/api/[route-path]/route.ts or @pages/api/[route-path].ts
+- Type definitions: @types/ or inline types
+- Validation schemas: @lib/validations/ or inline validation
+- Database models: @lib/models/ or @models/
+
+## Test Generation Strategy
+
+### 1. Basic Functionality Tests
+```javascript
+// Basic API route test template
+describe('API Route: /api/[route-path]', () => {
+  describe('GET requests', () => {
+    test('should return 200 for valid request', async () => {
+      const response = await fetch('/api/[route-path]');
+      expect(response.status).toBe(200);
+    });
+
+    test('should return valid JSON response', async () => {
+      const response = await fetch('/api/[route-path]');
+      const data = await response.json();
+      expect(data).toBeDefined();
+      expect(typeof data).toBe('object');
+    });
+  });
+
+  describe('POST requests', () => {
+    test('should create resource with valid data', async () => {
+      const testData = { name: 'Test', email: 'test@example.com' };
+      const response = await fetch('/api/[route-path]', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(testData)
+      });
+      
+      expect(response.status).toBe(201);
+      const result = await response.json();
+      expect(result.name).toBe(testData.name);
+    });
+
+    test('should reject invalid data', async () => {
+      const invalidData = { invalid: 'field' };
+      const response = await fetch('/api/[route-path]', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(invalidData)
+      });
+      
+      expect(response.status).toBe(400);
+    });
+  });
+});
+```
+
+### 2. Authentication Tests
+```javascript
+describe('Authentication', () => {
+  test('should require authentication for protected routes', async () => {
+    const response = await fetch('/api/protected-route');
+    expect(response.status).toBe(401);
+  });
+
+  test('should allow authenticated requests', async () => {
+    const token = 'valid-jwt-token';
+    const response = await fetch('/api/protected-route', {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    expect(response.status).not.toBe(401);
+  });
+
+  test('should validate JWT token format', async () => {
+    const invalidToken = 'invalid-token';
+    const response = await fetch('/api/protected-route', {
+      headers: { 'Authorization': `Bearer ${invalidToken}` }
+    });
+    expect(response.status).toBe(403);
+  });
+});
+```
+
+### 3. Input Validation Tests
+```javascript
+describe('Input Validation', () => {
+  const validationTests = [
+    { field: 'email', invalid: 'not-an-email', valid: 'test@example.com' },
+    { field: 'phone', invalid: '123', valid: '+1234567890' },
+    { field: 'age', invalid: -1, valid: 25 },
+    { field: 'name', invalid: '', valid: 'John Doe' }
+  ];
+
+  validationTests.forEach(({ field, invalid, valid }) => {
+    test(`should validate ${field} field`, async () => {
+      const invalidData = { [field]: invalid };
+      const validData = { [field]: valid };
+
+      // Test invalid data
+      const invalidResponse = await fetch('/api/[route-path]', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(invalidData)
+      });
+      expect(invalidResponse.status).toBe(400);
+
+      // Test valid data
+      const validResponse = await fetch('/api/[route-path]', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(validData)
+      });
+      expect(validResponse.status).not.toBe(400);
+    });
+  });
+});
+```
+
+### 4. Error Handling Tests
+```javascript
+describe('Error Handling', () => {
+  test('should handle malformed JSON', async () => {
+    const response = await fetch('/api/[route-path]', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: 'invalid-json'
+    });
+    expect(response.status).toBe(400);
+  });
+
+  test('should handle missing Content-Type header', async () => {
+    const response = await fetch('/api/[route-path]', {
+      method: 'POST',
+      body: JSON.stringify({ test: 'data' })
+    });
+    expect(response.status).toBe(400);
+  });
+
+  test('should handle request timeout', async () => {
+    // Mock slow endpoint
+    jest.setTimeout(5000);
+    const response = await fetch('/api/slow-endpoint');
+    // Test appropriate timeout handling
+  }, 5000);
+
+  test('should handle database connection errors', async () => {
+    // Mock database failure
+    const mockDbError = jest.spyOn(db, 'connect').mockRejectedValue(new Error('DB Error'));
+    
+    const response = await fetch('/api/[route-path]');
+    expect(response.status).toBe(500);
+    
+    mockDbError.mockRestore();
+  });
+});
+```
+
+### 5. Performance Tests
+```javascript
+describe('Performance', () => {
+  test('should respond within acceptable time', async () => {
+    const startTime = Date.now();
+    const response = await fetch('/api/[route-path]');
+    const endTime = Date.now();
+    
+    expect(response.status).toBe(200);
+    expect(endTime - startTime).toBeLessThan(1000); // 1 second
+  });
+
+  test('should handle concurrent requests', async () => {
+    const promises = Array.from({ length: 10 }, () =>
+      fetch('/api/[route-path]')
+    );
+    
+    const responses = await Promise.all(promises);
+    responses.forEach(response => {
+      expect(response.status).toBe(200);
+    });
+  });
+
+  test('should implement rate limiting', async () => {
+    const requests = Array.from({ length: 100 }, () =>
+      fetch('/api/[route-path]')
+    );
+    
+    const responses = await Promise.all(requests);
+    const rateLimitedResponses = responses.filter(r => r.status === 429);
+    expect(rateLimitedResponses.length).toBeGreaterThan(0);
+  });
+});
+```
+
+## Manual Testing Commands
+
+### cURL Commands Generation
+```bash
+# GET request
+curl -X GET "http://localhost:3000/api/[route-path]" \
+  -H "Accept: application/json"
+
+# POST request with data
+curl -X POST "http://localhost:3000/api/[route-path]" \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json" \
+  -d '{"key": "value"}'
+
+# Authenticated request
+curl -X GET "http://localhost:3000/api/protected-route" \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE" \
+  -H "Accept: application/json"
+
+# Upload file
+curl -X POST "http://localhost:3000/api/upload" \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE" \
+  -F "file=@path/to/file.jpg"
+```
+
+### HTTPie Commands
+```bash
+# GET request
+http GET localhost:3000/api/[route-path]
+
+# POST request with JSON
+http POST localhost:3000/api/[route-path] key=value
+
+# Authenticated request
+http GET localhost:3000/api/protected-route Authorization:"Bearer TOKEN"
+
+# Custom headers
+http GET localhost:3000/api/[route-path] X-Custom-Header:value
+```
+
+## Interactive Testing Tools
+
+### Postman Collection Generation
+```json
+{
+  "info": {
+    "name": "Next.js API Tests",
+    "description": "Generated API tests for [route-path]"
+  },
+  "item": [
+    {
+      "name": "GET [route-path]",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "{{baseUrl}}/api/[route-path]",
+          "host": ["{{baseUrl}}"],
+          "path": ["api", "[route-path]"]
+        }
+      }
+    },
+    {
+      "name": "POST [route-path]",
+      "request": {
+        "method": "POST",
+        "header": [
+          {
+            "key": "Content-Type",
+            "value": "application/json"
+          }
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"key\": \"value\"\n}"
+        },
+        "url": {
+          "raw": "{{baseUrl}}/api/[route-path]",
+          "host": ["{{baseUrl}}"],
+          "path": ["api", "[route-path]"]
+        }
+      }
+    }
+  ]
+}
+```
+
+### Thunder Client Collection
+```json
+{
+  "client": "Thunder Client",
+  "collectionName": "Next.js API Tests",
+  "dateExported": "2024-01-01",
+  "version": "1.1",
+  "folders": [],
+  "requests": [
+    {
+      "name": "Test API Route",
+      "url": "localhost:3000/api/[route-path]",
+      "method": "GET",
+      "headers": [
+        {
+          "name": "Accept",
+          "value": "application/json"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Test Data Management
+
+### Test Fixtures
+```typescript
+// test/fixtures/apiTestData.ts
+export const validUserData = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  age: 30,
+  role: 'user'
+};
+
+export const invalidUserData = {
+  name: '',
+  email: 'invalid-email',
+  age: -1,
+  role: 'invalid-role'
+};
+
+export const testHeaders = {
+  'Content-Type': 'application/json',
+  'Accept': 'application/json',
+  'User-Agent': 'API-Test-Suite/1.0'
+};
+```
+
+### Mock Data Generation
+```typescript
+// test/utils/mockData.ts
+export function generateMockUser() {
+  return {
+    id: Math.random().toString(36).substr(2, 9),
+    name: `User ${Math.floor(Math.random() * 1000)}`,
+    email: `user${Date.now()}@example.com`,
+    createdAt: new Date().toISOString()
+  };
+}
+
+export function generateBulkTestData(count: number) {
+  return Array.from({ length: count }, generateMockUser);
+}
+```
+
+## Test Environment Setup
+
+### Jest Configuration
+```javascript
+// jest.config.js for API testing
+module.exports = {
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
+  testMatch: ['**/__tests__/**/*.test.js', '**/?(*.)+(spec|test).js'],
+  collectCoverageFrom: [
+    'pages/api/**/*.{js,ts}',
+    'app/api/**/*.{js,ts}',
+    '!**/*.d.ts',
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 70,
+      functions: 70,
+      lines: 70,
+      statements: 70
+    }
+  }
+};
+```
+
+### Test Setup
+```javascript
+// test/setup.js
+import { createMocks } from 'node-mocks-http';
+import { testDb } from './testDatabase';
+
+// Global test setup
+beforeAll(async () => {
+  // Setup test database
+  await testDb.connect();
+});
+
+afterAll(async () => {
+  // Cleanup test database
+  await testDb.disconnect();
+});
+
+beforeEach(async () => {
+  // Reset database state
+  await testDb.reset();
+});
+
+// Helper function for API testing
+global.createAPITest = (handler) => {
+  return (method, url, options = {}) => {
+    const { req, res } = createMocks({
+      method,
+      url,
+      ...options
+    });
+    return handler(req, res);
+  };
+};
+```
+
+## Automated Testing Integration
+
+### GitHub Actions Workflow
+```yaml
+name: API Tests
+on: [push, pull_request]
+
+jobs:
+  test-api:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: npm run test:api
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+```
+
+### Continuous Testing
+```bash
+# Watch mode for development
+npm run test:api -- --watch
+
+# Coverage reporting
+npm run test:api -- --coverage
+
+# Specific route testing
+npm run test:api -- --testNamePattern="api/users"
+```
+
+## Test Results Analysis
+
+Generate comprehensive test report including:
+1. **Test Coverage**: Line, branch, function coverage percentages
+2. **Performance Metrics**: Response times, throughput
+3. **Security Analysis**: Authentication, authorization, input validation
+4. **Error Handling**: Exception scenarios and error responses
+5. **Compatibility**: Cross-environment testing results
+
+Provide actionable recommendations for improving API reliability, performance, and security.

.agent/commands/nextjs-component-generator.md

@@ -0,0 +1,488 @@
+---
+allowed-tools: Read, Write, Edit
+argument-hint: [component-name] [--client] [--server] [--page] [--layout]
+description: Generate optimized React components for Next.js with TypeScript and best practices
+---
+
+## Next.js Component Generator
+
+**Component Name**: $ARGUMENTS
+
+## Project Context Analysis
+
+### Framework Detection
+- Next.js config: @next.config.js
+- TypeScript config: @tsconfig.json (if exists)
+- Tailwind config: @tailwind.config.js (if exists)
+- Package.json: @package.json
+
+### Existing Component Patterns
+- Components directory: @components/
+- App directory: @app/ (if App Router)
+- Pages directory: @pages/ (if Pages Router)
+- Styles directory: @styles/
+
+## Component Generation Requirements
+
+### 1. Component Type Detection
+Based on arguments and context, determine component type:
+- **Client Component**: Interactive UI with state/events (`--client` or default for interactive components)
+- **Server Component**: Static rendering, data fetching (`--server` or default for Next.js 13+)
+- **Page Component**: Route-level component (`--page`)
+- **Layout Component**: Shared layout wrapper (`--layout`)
+
+### 2. File Structure Creation
+Generate comprehensive component structure:
+```
+components/[ComponentName]/
+├── index.ts                    # Barrel export
+├── [ComponentName].tsx         # Main component
+├── [ComponentName].module.css  # Component styles
+├── [ComponentName].test.tsx    # Unit tests
+├── [ComponentName].stories.tsx # Storybook story (if detected)
+└── types.ts                   # TypeScript types
+```
+
+### 3. Component Templates
+
+#### Server Component Template
+```typescript
+import { FC } from 'react';
+import styles from './ComponentName.module.css';
+
+interface ComponentNameProps {
+  /**
+   * Component description
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * ComponentName - Server Component
+ * 
+ * @description Brief description of component purpose
+ * @example
+ * <ComponentName>Content</ComponentName>
+ */
+export const ComponentName: FC<ComponentNameProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`${styles.container} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default ComponentName;
+```
+
+#### Client Component Template
+```typescript
+'use client';
+
+import { FC, useState, useEffect } from 'react';
+import styles from './ComponentName.module.css';
+
+interface ComponentNameProps {
+  /**
+   * Component description
+   */
+  children?: React.ReactNode;
+  /**
+   * Click event handler
+   */
+  onClick?: () => void;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * ComponentName - Client Component
+ * 
+ * @description Interactive component with client-side functionality
+ * @example
+ * <ComponentName onClick={() => console.log('clicked')}>
+ *   Content
+ * </ComponentName>
+ */
+export const ComponentName: FC<ComponentNameProps> = ({
+  children,
+  onClick,
+  className = '',
+  ...props
+}) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleClick = () => {
+    setIsActive(!isActive);
+    onClick?.();
+  };
+
+  return (
+    <button
+      className={`${styles.button} ${isActive ? styles.active : ''} ${className}`}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ComponentName;
+```
+
+#### Page Component Template
+```typescript
+import { Metadata } from 'next';
+import ComponentName from '@/components/ComponentName';
+
+export const metadata: Metadata = {
+  title: 'Page Title',
+  description: 'Page description',
+};
+
+interface PageProps {
+  params: { id: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+}
+
+export default function Page({ params, searchParams }: PageProps) {
+  return (
+    <main>
+      <h1>Page Title</h1>
+      <ComponentName />
+    </main>
+  );
+}
+```
+
+#### Layout Component Template
+```typescript
+import { FC } from 'react';
+import styles from './Layout.module.css';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  /**
+   * Page title
+   */
+  title?: string;
+}
+
+/**
+ * Layout - Shared layout component
+ * 
+ * @description Provides consistent layout structure across pages
+ */
+export const Layout: FC<LayoutProps> = ({
+  children,
+  title,
+}) => {
+  return (
+    <div className={styles.layout}>
+      <header className={styles.header}>
+        {title && <h1 className={styles.title}>{title}</h1>}
+      </header>
+      
+      <main className={styles.main}>
+        {children}
+      </main>
+      
+      <footer className={styles.footer}>
+        <p>&copy; 2024 Your App</p>
+      </footer>
+    </div>
+  );
+};
+
+export default Layout;
+```
+
+### 4. CSS Module Templates
+
+#### Basic Component Styles
+```css
+/* ComponentName.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background-color: #ffffff;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background-color: #3b82f6;
+  color: white;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.button:hover {
+  background-color: #2563eb;
+}
+
+.button:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.button.active {
+  background-color: #1d4ed8;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    padding: 0.75rem;
+  }
+  
+  .button {
+    padding: 0.75rem 1rem;
+  }
+}
+```
+
+#### Layout Styles
+```css
+/* Layout.module.css */
+.layout {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.header {
+  padding: 1rem 2rem;
+  background-color: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.main {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.footer {
+  padding: 1rem 2rem;
+  background-color: #f1f5f9;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+  color: #64748b;
+}
+```
+
+### 5. TypeScript Types
+```typescript
+// types.ts
+export interface BaseComponentProps {
+  children?: React.ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+
+export interface ButtonProps extends BaseComponentProps {
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  loading?: boolean;
+  onClick?: () => void;
+}
+
+export interface LayoutProps extends BaseComponentProps {
+  title?: string;
+  sidebar?: React.ReactNode;
+  breadcrumbs?: BreadcrumbItem[];
+}
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+```
+
+### 6. Unit Tests
+```typescript
+// ComponentName.test.tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import ComponentName from './ComponentName';
+
+describe('ComponentName', () => {
+  it('renders children correctly', () => {
+    render(<ComponentName>Test Content</ComponentName>);
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<ComponentName className="custom-class">Test</ComponentName>);
+    const element = screen.getByText('Test');
+    expect(element).toHaveClass('custom-class');
+  });
+
+  it('handles click events', () => {
+    const handleClick = jest.fn();
+    render(<ComponentName onClick={handleClick}>Click me</ComponentName>);
+    
+    const button = screen.getByText('Click me');
+    fireEvent.click(button);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('toggles active state on click', () => {
+    render(<ComponentName>Toggle</ComponentName>);
+    const button = screen.getByText('Toggle');
+    
+    expect(button).not.toHaveClass('active');
+    
+    fireEvent.click(button);
+    expect(button).toHaveClass('active');
+    
+    fireEvent.click(button);
+    expect(button).not.toHaveClass('active');
+  });
+
+  it('is accessible', () => {
+    render(<ComponentName>Accessible Button</ComponentName>);
+    const button = screen.getByRole('button');
+    
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAccessibleName('Accessible Button');
+  });
+});
+```
+
+### 7. Storybook Stories (if detected)
+```typescript
+// ComponentName.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import ComponentName from './ComponentName';
+
+const meta: Meta<typeof ComponentName> = {
+  title: 'Components/ComponentName',
+  component: ComponentName,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A reusable component built for Next.js applications.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: { action: 'clicked' },
+    className: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Component',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: 'Custom Styled',
+    className: 'custom-style',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    children: 'Click me',
+    onClick: () => alert('Component clicked!'),
+  },
+};
+```
+
+### 8. Barrel Export
+```typescript
+// index.ts
+export { default } from './ComponentName';
+export type { ComponentNameProps } from './ComponentName';
+```
+
+## Framework-Specific Optimizations
+
+### Tailwind CSS Integration (if detected)
+Replace CSS modules with Tailwind classes:
+```typescript
+export const ComponentName: FC<ComponentNameProps> = ({
+  children,
+  className = '',
+}) => {
+  return (
+    <div className={`flex flex-col p-4 rounded-lg border border-slate-200 bg-white ${className}`}>
+      {children}
+    </div>
+  );
+};
+```
+
+### Next.js App Router Optimizations
+- **Server Components**: Default for non-interactive components
+- **Client Components**: Explicit 'use client' directive
+- **Metadata**: Include metadata for page components
+- **Loading States**: Implement loading.tsx for async components
+
+### Accessibility Features
+- **ARIA Labels**: Proper labeling for screen readers
+- **Keyboard Navigation**: Tab order and keyboard shortcuts
+- **Focus Management**: Visible focus indicators
+- **Semantic HTML**: Proper semantic elements
+
+## Component Generation Process
+
+1. **Analysis**: Analyze existing project structure and patterns
+2. **Template Selection**: Choose appropriate template based on component type
+3. **Customization**: Adapt template to project conventions
+4. **File Creation**: Generate all component files
+5. **Integration**: Update index files and exports
+6. **Validation**: Verify component compiles and tests pass
+
+## Quality Checklist
+
+- [ ] Component follows project naming conventions
+- [ ] TypeScript types are properly defined
+- [ ] CSS follows established patterns (modules or Tailwind)
+- [ ] Unit tests cover key functionality
+- [ ] Component is accessible (ARIA, keyboard navigation)
+- [ ] Documentation includes usage examples
+- [ ] Storybook story created (if Storybook detected)
+- [ ] Component compiles without errors
+- [ ] Tests pass successfully
+
+Provide the complete component implementation with all specified files and features.

.agent/skills/frontend-design/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

.agent/skills/senior-frontend/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: senior-frontend
+description: Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
+---
+
+# Senior Frontend
+
+Complete toolkit for senior frontend with modern tools and best practices.
+
+## Quick Start
+
+### Main Capabilities
+
+This skill provides three core capabilities through automated scripts:
+
+```bash
+# Script 1: Component Generator
+python scripts/component_generator.py [options]
+
+# Script 2: Bundle Analyzer
+python scripts/bundle_analyzer.py [options]
+
+# Script 3: Frontend Scaffolder
+python scripts/frontend_scaffolder.py [options]
+```
+
+## Core Capabilities
+
+### 1. Component Generator
+
+Automated tool for component generator tasks.
+
+**Features:**
+- Automated scaffolding
+- Best practices built-in
+- Configurable templates
+- Quality checks
+
+**Usage:**
+```bash
+python scripts/component_generator.py <project-path> [options]
+```
+
+### 2. Bundle Analyzer
+
+Comprehensive analysis and optimization tool.
+
+**Features:**
+- Deep analysis
+- Performance metrics
+- Recommendations
+- Automated fixes
+
+**Usage:**
+```bash
+python scripts/bundle_analyzer.py <target-path> [--verbose]
+```
+
+### 3. Frontend Scaffolder
+
+Advanced tooling for specialized tasks.
+
+**Features:**
+- Expert-level automation
+- Custom configurations
+- Integration ready
+- Production-grade output
+
+**Usage:**
+```bash
+python scripts/frontend_scaffolder.py [arguments] [options]
+```
+
+## Reference Documentation
+
+### React Patterns
+
+Comprehensive guide available in `references/react_patterns.md`:
+
+- Detailed patterns and practices
+- Code examples
+- Best practices
+- Anti-patterns to avoid
+- Real-world scenarios
+
+### Nextjs Optimization Guide
+
+Complete workflow documentation in `references/nextjs_optimization_guide.md`:
+
+- Step-by-step processes
+- Optimization strategies
+- Tool integrations
+- Performance tuning
+- Troubleshooting guide
+
+### Frontend Best Practices
+
+Technical reference guide in `references/frontend_best_practices.md`:
+
+- Technology stack details
+- Configuration examples
+- Integration patterns
+- Security considerations
+- Scalability guidelines
+
+## Tech Stack
+
+**Languages:** TypeScript, JavaScript, Python, Go, Swift, Kotlin
+**Frontend:** React, Next.js, React Native, Flutter
+**Backend:** Node.js, Express, GraphQL, REST APIs
+**Database:** PostgreSQL, Prisma, NeonDB, Supabase
+**DevOps:** Docker, Kubernetes, Terraform, GitHub Actions, CircleCI
+**Cloud:** AWS, GCP, Azure
+
+## Development Workflow
+
+### 1. Setup and Configuration
+
+```bash
+# Install dependencies
+npm install
+# or
+pip install -r requirements.txt
+
+# Configure environment
+cp .env.example .env
+```
+
+### 2. Run Quality Checks
+
+```bash
+# Use the analyzer script
+python scripts/bundle_analyzer.py .
+
+# Review recommendations
+# Apply fixes
+```
+
+### 3. Implement Best Practices
+
+Follow the patterns and practices documented in:
+- `references/react_patterns.md`
+- `references/nextjs_optimization_guide.md`
+- `references/frontend_best_practices.md`
+
+## Best Practices Summary
+
+### Code Quality
+- Follow established patterns
+- Write comprehensive tests
+- Document decisions
+- Review regularly
+
+### Performance
+- Measure before optimizing
+- Use appropriate caching
+- Optimize critical paths
+- Monitor in production
+
+### Security
+- Validate all inputs
+- Use parameterized queries
+- Implement proper authentication
+- Keep dependencies updated
+
+### Maintainability
+- Write clear code
+- Use consistent naming
+- Add helpful comments
+- Keep it simple
+
+## Common Commands
+
+```bash
+# Development
+npm run dev
+npm run build
+npm run test
+npm run lint
+
+# Analysis
+python scripts/bundle_analyzer.py .
+python scripts/frontend_scaffolder.py --analyze
+
+# Deployment
+docker build -t app:latest .
+docker-compose up -d
+kubectl apply -f k8s/
+```
+
+## Troubleshooting
+
+### Common Issues
+
+Check the comprehensive troubleshooting section in `references/frontend_best_practices.md`.
+
+### Getting Help
+
+- Review reference documentation
+- Check script output messages
+- Consult tech stack documentation
+- Review error logs
+
+## Resources
+
+- Pattern Reference: `references/react_patterns.md`
+- Workflow Guide: `references/nextjs_optimization_guide.md`
+- Technical Guide: `references/frontend_best_practices.md`
+- Tool Scripts: `scripts/` directory

.agent/skills/senior-frontend/references/frontend_best_practices.md

@@ -0,0 +1,103 @@
+# Frontend Best Practices
+
+## Overview
+
+This reference guide provides comprehensive information for senior frontend.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior frontend.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-frontend/references/nextjs_optimization_guide.md

@@ -0,0 +1,103 @@
+# Nextjs Optimization Guide
+
+## Overview
+
+This reference guide provides comprehensive information for senior frontend.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior frontend.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-frontend/references/react_patterns.md

@@ -0,0 +1,103 @@
+# React Patterns
+
+## Overview
+
+This reference guide provides comprehensive information for senior frontend.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior frontend.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-frontend/scripts/bundle_analyzer.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+Bundle Analyzer
+Automated tool for senior frontend tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class BundleAnalyzer:
+    """Main class for bundle analyzer functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="Bundle Analyzer"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = BundleAnalyzer(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()

.agent/skills/senior-frontend/scripts/component_generator.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+Component Generator
+Automated tool for senior frontend tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class ComponentGenerator:
+    """Main class for component generator functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="Component Generator"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = ComponentGenerator(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()

.agent/skills/senior-frontend/scripts/frontend_scaffolder.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+Frontend Scaffolder
+Automated tool for senior frontend tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class FrontendScaffolder:
+    """Main class for frontend scaffolder functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="Frontend Scaffolder"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = FrontendScaffolder(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()

.agent/skills/senior-qa/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: senior-qa
+description: Comprehensive QA and testing skill for quality assurance, test automation, and testing strategies for ReactJS, NextJS, NodeJS applications. Includes test suite generation, coverage analysis, E2E testing setup, and quality metrics. Use when designing test strategies, writing test cases, implementing test automation, performing manual testing, or analyzing test coverage.
+---
+
+# Senior Qa
+
+Complete toolkit for senior qa with modern tools and best practices.
+
+## Quick Start
+
+### Main Capabilities
+
+This skill provides three core capabilities through automated scripts:
+
+```bash
+# Script 1: Test Suite Generator
+python scripts/test_suite_generator.py [options]
+
+# Script 2: Coverage Analyzer
+python scripts/coverage_analyzer.py [options]
+
+# Script 3: E2E Test Scaffolder
+python scripts/e2e_test_scaffolder.py [options]
+```
+
+## Core Capabilities
+
+### 1. Test Suite Generator
+
+Automated tool for test suite generator tasks.
+
+**Features:**
+- Automated scaffolding
+- Best practices built-in
+- Configurable templates
+- Quality checks
+
+**Usage:**
+```bash
+python scripts/test_suite_generator.py <project-path> [options]
+```
+
+### 2. Coverage Analyzer
+
+Comprehensive analysis and optimization tool.
+
+**Features:**
+- Deep analysis
+- Performance metrics
+- Recommendations
+- Automated fixes
+
+**Usage:**
+```bash
+python scripts/coverage_analyzer.py <target-path> [--verbose]
+```
+
+### 3. E2E Test Scaffolder
+
+Advanced tooling for specialized tasks.
+
+**Features:**
+- Expert-level automation
+- Custom configurations
+- Integration ready
+- Production-grade output
+
+**Usage:**
+```bash
+python scripts/e2e_test_scaffolder.py [arguments] [options]
+```
+
+## Reference Documentation
+
+### Testing Strategies
+
+Comprehensive guide available in `references/testing_strategies.md`:
+
+- Detailed patterns and practices
+- Code examples
+- Best practices
+- Anti-patterns to avoid
+- Real-world scenarios
+
+### Test Automation Patterns
+
+Complete workflow documentation in `references/test_automation_patterns.md`:
+
+- Step-by-step processes
+- Optimization strategies
+- Tool integrations
+- Performance tuning
+- Troubleshooting guide
+
+### Qa Best Practices
+
+Technical reference guide in `references/qa_best_practices.md`:
+
+- Technology stack details
+- Configuration examples
+- Integration patterns
+- Security considerations
+- Scalability guidelines
+
+## Tech Stack
+
+**Languages:** TypeScript, JavaScript, Python, Go, Swift, Kotlin
+**Frontend:** React, Next.js, React Native, Flutter
+**Backend:** Node.js, Express, GraphQL, REST APIs
+**Database:** PostgreSQL, Prisma, NeonDB, Supabase
+**DevOps:** Docker, Kubernetes, Terraform, GitHub Actions, CircleCI
+**Cloud:** AWS, GCP, Azure
+
+## Development Workflow
+
+### 1. Setup and Configuration
+
+```bash
+# Install dependencies
+npm install
+# or
+pip install -r requirements.txt
+
+# Configure environment
+cp .env.example .env
+```
+
+### 2. Run Quality Checks
+
+```bash
+# Use the analyzer script
+python scripts/coverage_analyzer.py .
+
+# Review recommendations
+# Apply fixes
+```
+
+### 3. Implement Best Practices
+
+Follow the patterns and practices documented in:
+- `references/testing_strategies.md`
+- `references/test_automation_patterns.md`
+- `references/qa_best_practices.md`
+
+## Best Practices Summary
+
+### Code Quality
+- Follow established patterns
+- Write comprehensive tests
+- Document decisions
+- Review regularly
+
+### Performance
+- Measure before optimizing
+- Use appropriate caching
+- Optimize critical paths
+- Monitor in production
+
+### Security
+- Validate all inputs
+- Use parameterized queries
+- Implement proper authentication
+- Keep dependencies updated
+
+### Maintainability
+- Write clear code
+- Use consistent naming
+- Add helpful comments
+- Keep it simple
+
+## Common Commands
+
+```bash
+# Development
+npm run dev
+npm run build
+npm run test
+npm run lint
+
+# Analysis
+python scripts/coverage_analyzer.py .
+python scripts/e2e_test_scaffolder.py --analyze
+
+# Deployment
+docker build -t app:latest .
+docker-compose up -d
+kubectl apply -f k8s/
+```
+
+## Troubleshooting
+
+### Common Issues
+
+Check the comprehensive troubleshooting section in `references/qa_best_practices.md`.
+
+### Getting Help
+
+- Review reference documentation
+- Check script output messages
+- Consult tech stack documentation
+- Review error logs
+
+## Resources
+
+- Pattern Reference: `references/testing_strategies.md`
+- Workflow Guide: `references/test_automation_patterns.md`
+- Technical Guide: `references/qa_best_practices.md`
+- Tool Scripts: `scripts/` directory

.agent/skills/senior-qa/references/qa_best_practices.md

@@ -0,0 +1,103 @@
+# Qa Best Practices
+
+## Overview
+
+This reference guide provides comprehensive information for senior qa.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior qa.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-qa/references/test_automation_patterns.md

@@ -0,0 +1,103 @@
+# Test Automation Patterns
+
+## Overview
+
+This reference guide provides comprehensive information for senior qa.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior qa.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-qa/references/testing_strategies.md

@@ -0,0 +1,103 @@
+# Testing Strategies
+
+## Overview
+
+This reference guide provides comprehensive information for senior qa.
+
+## Patterns and Practices
+
+### Pattern 1: Best Practice Implementation
+
+**Description:**
+Detailed explanation of the pattern.
+
+**When to Use:**
+- Scenario 1
+- Scenario 2
+- Scenario 3
+
+**Implementation:**
+```typescript
+// Example code implementation
+export class Example {
+  // Implementation details
+}
+```
+
+**Benefits:**
+- Benefit 1
+- Benefit 2
+- Benefit 3
+
+**Trade-offs:**
+- Consider 1
+- Consider 2
+- Consider 3
+
+### Pattern 2: Advanced Technique
+
+**Description:**
+Another important pattern for senior qa.
+
+**Implementation:**
+```typescript
+// Advanced example
+async function advancedExample() {
+  // Code here
+}
+```
+
+## Guidelines
+
+### Code Organization
+- Clear structure
+- Logical separation
+- Consistent naming
+- Proper documentation
+
+### Performance Considerations
+- Optimization strategies
+- Bottleneck identification
+- Monitoring approaches
+- Scaling techniques
+
+### Security Best Practices
+- Input validation
+- Authentication
+- Authorization
+- Data protection
+
+## Common Patterns
+
+### Pattern A
+Implementation details and examples.
+
+### Pattern B
+Implementation details and examples.
+
+### Pattern C
+Implementation details and examples.
+
+## Anti-Patterns to Avoid
+
+### Anti-Pattern 1
+What not to do and why.
+
+### Anti-Pattern 2
+What not to do and why.
+
+## Tools and Resources
+
+### Recommended Tools
+- Tool 1: Purpose
+- Tool 2: Purpose
+- Tool 3: Purpose
+
+### Further Reading
+- Resource 1
+- Resource 2
+- Resource 3
+
+## Conclusion
+
+Key takeaways for using this reference guide effectively.

.agent/skills/senior-qa/scripts/coverage_analyzer.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+Coverage Analyzer
+Automated tool for senior qa tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class CoverageAnalyzer:
+    """Main class for coverage analyzer functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="Coverage Analyzer"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = CoverageAnalyzer(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()

.agent/skills/senior-qa/scripts/e2e_test_scaffolder.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+E2E Test Scaffolder
+Automated tool for senior qa tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class E2ETestScaffolder:
+    """Main class for e2e test scaffolder functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="E2E Test Scaffolder"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = E2ETestScaffolder(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()

.agent/skills/senior-qa/scripts/test_suite_generator.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""
+Test Suite Generator
+Automated tool for senior qa tasks
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+class TestSuiteGenerator:
+    """Main class for test suite generator functionality"""
+    
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results = {}
+    
+    def run(self) -> Dict:
+        """Execute the main functionality"""
+        print(f"🚀 Running {self.__class__.__name__}...")
+        print(f"📁 Target: {self.target_path}")
+        
+        try:
+            self.validate_target()
+            self.analyze()
+            self.generate_report()
+            
+            print("✅ Completed successfully!")
+            return self.results
+            
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+    
+    def validate_target(self):
+        """Validate the target path exists and is accessible"""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+    
+    def analyze(self):
+        """Perform the main analysis or operation"""
+        if self.verbose:
+            print("📊 Analyzing...")
+        
+        # Main logic here
+        self.results['status'] = 'success'
+        self.results['target'] = str(self.target_path)
+        self.results['findings'] = []
+        
+        # Add analysis results
+        if self.verbose:
+            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
+    
+    def generate_report(self):
+        """Generate and display the report"""
+        print("\n" + "="*50)
+        print("REPORT")
+        print("="*50)
+        print(f"Target: {self.results.get('target')}")
+        print(f"Status: {self.results.get('status')}")
+        print(f"Findings: {len(self.results.get('findings', []))}")
+        print("="*50 + "\n")
+
+def main():
+    """Main entry point"""
+    parser = argparse.ArgumentParser(
+        description="Test Suite Generator"
+    )
+    parser.add_argument(
+        'target',
+        help='Target path to analyze or process'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+    
+    args = parser.parse_args()
+    
+    tool = TestSuiteGenerator(
+        args.target,
+        verbose=args.verbose
+    )
+    
+    results = tool.run()
+    
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+if __name__ == '__main__':
+    main()