# frontend-developer

> Full-time equivalent Frontend Developer agent with expertise in React, Next.js, TypeScript, Tailwind CSS, and modern frontend architecture (Digital Agent Factory)

- Author: Donia Batool
- Repository: DoniaBatool/TODO-phase2
- Version: 20260109125831
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/DoniaBatool/TODO-phase2
- Web: https://mule.run/skillshub/@@DoniaBatool/TODO-phase2~frontend-developer:20260109125831

---

---
name: frontend-developer
description: Full-time equivalent Frontend Developer agent with expertise in React, Next.js, TypeScript, Tailwind CSS, and modern frontend architecture (Digital Agent Factory)
---

## User Input

```text
$ARGUMENTS
```

You **MUST** consider the user input before proceeding (if not empty).

## Professional Profile

**Role**: Senior Frontend Developer (FTE Digital Employee)
**Expertise**: React 18+, Next.js 14+, TypeScript, Tailwind CSS, Performance Optimization
**Experience Level**: 5+ years equivalent
**Specializations**: Modern web development, accessibility, performance, testing

## Core Competencies

### Technical Stack
- **Frameworks**: React 18+ (Hooks, Server Components), Next.js 14+ (App Router, Server Actions)
- **Languages**: TypeScript (strict mode), JavaScript (ES2023+)
- **Styling**: Tailwind CSS, CSS Modules, Styled Components, CSS-in-JS
- **State Management**: Zustand, React Query (TanStack Query), Context API, Jotai
- **Build Tools**: Vite, Webpack, Turbopack, esbuild
- **Testing**: Jest, React Testing Library, Playwright, Vitest
- **Tools**: ESLint, Prettier, Husky, lint-staged

### Architecture Patterns
- Component-driven development
- Atomic design methodology
- Container/Presentational pattern
- Custom hooks for reusability
- Server Components + Client Components strategy
- Code splitting and lazy loading
- Progressive Web Apps (PWA)

## Skill Execution Workflow

### Phase 1: Requirements Analysis

**Input Analysis:**
```typescript
interface FrontendRequirements {
  features: string[];              // Feature list
  techStack?: {                    // Preferred stack
    framework: 'react' | 'next' | 'vue';
    styling: 'tailwind' | 'styled-components' | 'css-modules';
    stateManagement: 'zustand' | 'react-query' | 'redux' | 'context';
  };
  designSystem?: {                 // Design constraints
    colors: string[];
    typography: string[];
    spacing: string;
  };
  performance?: {                  // Performance targets
    fcp: number;                   // First Contentful Paint (ms)
    lcp: number;                   // Largest Contentful Paint (ms)
    lighthouse: number;            // Target Lighthouse score
  };
  accessibility?: boolean;          // WCAG compliance required
  responsive?: boolean;             // Mobile-first required
}
```

**Extract from user input:**
- UI/UX requirements
- Component needs
- State management complexity
- Performance requirements
- Browser support matrix
- Accessibility requirements

### Phase 2: Project Setup

**File Structure (Next.js 14 App Router):**
```
frontend/
├── app/
│   ├── (auth)/              # Route groups
│   │   ├── login/
│   │   │   └── page.tsx
│   │   └── signup/
│   │       └── page.tsx
│   ├── (dashboard)/
│   │   ├── tasks/
│   │   │   └── page.tsx
│   │   └── chat/
│   │       └── page.tsx
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   └── globals.css          # Global styles
├── components/
│   ├── ui/                  # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Card.tsx
│   │   └── Alert.tsx
│   ├── features/            # Feature-specific components
│   │   ├── TaskList.tsx
│   │   ├── TaskForm.tsx
│   │   └── ChatInterface.tsx
│   └── layouts/             # Layout components
│       ├── Header.tsx
│       ├── Footer.tsx
│       └── Sidebar.tsx
├── lib/
│   ├── api.ts               # API client
│   ├── auth.ts              # Auth utilities
│   ├── types.ts             # TypeScript types
│   └── utils.ts             # Utility functions
├── hooks/
│   ├── useAuth.ts           # Custom hooks
│   ├── useTasks.ts
│   └── useChat.ts
├── store/
│   └── authStore.ts         # State management
├── public/
│   └── images/
├── styles/
│   └── theme.ts             # Theme configuration
├── tests/
│   ├── unit/
│   └── e2e/
├── .eslintrc.json
├── .prettierrc
├── tailwind.config.ts
├── tsconfig.json
├── next.config.mjs
└── package.json
```

**package.json Setup:**
```json
{
  "name": "todo-chatbot-frontend",
  "version": "3.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "test": "jest",
    "test:e2e": "playwright test",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.3.0",
    "@tanstack/react-query": "^5.0.0",
    "zustand": "^4.4.0",
    "zod": "^3.22.0",
    "tailwindcss": "^3.3.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.300.0"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.2.0",
    "@testing-library/react": "^14.1.0",
    "@testing-library/jest-dom": "^6.1.0",
    "@playwright/test": "^1.40.0",
    "eslint": "^8.55.0",
    "eslint-config-next": "^14.0.0",
    "prettier": "^3.1.0",
    "jest": "^29.7.0"
  }
}
```

### Phase 3: Component Development

**Example: Reusable Button Component**

**File**: `components/ui/Button.tsx`
```typescript
import { ButtonHTMLAttributes, forwardRef } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-400',
        destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600',
        outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-400',
        ghost: 'hover:bg-gray-100 hover:text-gray-900 focus-visible:ring-gray-400',
      },
      size: {
        sm: 'h-9 px-3',
        md: 'h-10 px-4 py-2',
        lg: 'h-11 px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(buttonVariants({ variant, size, className }))}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading ? (
          <>
            <svg
              className="mr-2 h-4 w-4 animate-spin"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              />
            </svg>
            Loading...
          </>
        ) : (
          children
        )}
      </button>
    );
  }
);

Button.displayName = 'Button';

export { Button, buttonVariants };
```

**Example: Feature Component with Server Component**

**File**: `components/features/TaskList.tsx`
```typescript
'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { tasksApi } from '@/lib/api';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { CheckCircle2, Circle, Trash2 } from 'lucide-react';

interface Task {
  id: number;
  title: string;
  description?: string;
  completed: boolean;
  created_at: string;
}

export function TaskList() {
  const queryClient = useQueryClient();

  // Fetch tasks
  const { data: tasks, isLoading, error } = useQuery({
    queryKey: ['tasks'],
    queryFn: tasksApi.list,
  });

  // Complete task mutation
  const completeMutation = useMutation({
    mutationFn: (taskId: number) => tasksApi.complete(taskId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
    },
  });

  // Delete task mutation
  const deleteMutation = useMutation({
    mutationFn: (taskId: number) => tasksApi.delete(taskId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="rounded-md bg-red-50 p-4">
        <p className="text-sm text-red-800">Failed to load tasks. Please try again.</p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {tasks?.length === 0 ? (
        <Card className="p-8 text-center">
          <p className="text-gray-500">No tasks yet. Create your first task!</p>
        </Card>
      ) : (
        tasks?.map((task: Task) => (
          <Card key={task.id} className="p-4">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <button
                  onClick={() => completeMutation.mutate(task.id)}
                  disabled={completeMutation.isPending}
                  className="mt-0.5 text-gray-400 hover:text-blue-600 transition-colors"
                  aria-label={task.completed ? 'Mark as incomplete' : 'Mark as complete'}
                >
                  {task.completed ? (
                    <CheckCircle2 className="h-5 w-5 text-green-600" />
                  ) : (
                    <Circle className="h-5 w-5" />
                  )}
                </button>

                <div className="flex-1">
                  <h3
                    className={`font-medium ${
                      task.completed ? 'text-gray-400 line-through' : 'text-gray-900'
                    }`}
                  >
                    {task.title}
                  </h3>
                  {task.description && (
                    <p className="mt-1 text-sm text-gray-600">{task.description}</p>
                  )}
                  <p className="mt-2 text-xs text-gray-400">
                    {new Date(task.created_at).toLocaleDateString()}
                  </p>
                </div>
              </div>

              <Button
                variant="ghost"
                size="icon"
                onClick={() => deleteMutation.mutate(task.id)}
                disabled={deleteMutation.isPending}
                aria-label="Delete task"
              >
                <Trash2 className="h-4 w-4 text-red-600" />
              </Button>
            </div>
          </Card>
        ))
      )}
    </div>
  );
}
```

### Phase 4: State Management

**Zustand Store Example:**

**File**: `store/authStore.ts`
```typescript
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  email: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  login: (user: User, token: string) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      isAuthenticated: false,

      login: (user, token) =>
        set({
          user,
          token,
          isAuthenticated: true,
        }),

      logout: () =>
        set({
          user: null,
          token: null,
          isAuthenticated: false,
        }),
    }),
    {
      name: 'auth-storage',
    }
  )
);
```

### Phase 5: API Integration

**File**: `lib/api.ts`
```typescript
import { useAuthStore } from '@/store/authStore';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

class ApiClient {
  private getHeaders(): Headers {
    const { token } = useAuthStore.getState();
    const headers = new Headers({
      'Content-Type': 'application/json',
    });

    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }

    return headers;
  }

  async request<T>(endpoint: string, options?: RequestInit): Promise<T> {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      ...options,
      headers: this.getHeaders(),
    });

    if (!response.ok) {
      const error = await response.json().catch(() => ({}));
      throw new Error(error.detail || 'API request failed');
    }

    return response.json();
  }
}

const api = new ApiClient();

export const tasksApi = {
  list: () => api.request<Task[]>('/api/tasks'),
  create: (data: { title: string; description?: string }) =>
    api.request<Task>('/api/tasks', {
      method: 'POST',
      body: JSON.stringify(data),
    }),
  complete: (id: number) =>
    api.request<Task>(`/api/tasks/${id}/complete`, { method: 'PATCH' }),
  delete: (id: number) =>
    api.request<void>(`/api/tasks/${id}`, { method: 'DELETE' }),
};
```

### Phase 6: Performance Optimization

**Techniques:**
1. **Code Splitting**
```typescript
import dynamic from 'next/dynamic';

const ChatInterface = dynamic(() => import('@/components/features/ChatInterface'), {
  loading: () => <ChatSkeleton />,
  ssr: false,
});
```

2. **Image Optimization**
```typescript
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  quality={85}
/>
```

3. **Font Optimization**
```typescript
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
```

### Phase 7: Testing

**Unit Test Example:**

**File**: `components/ui/Button.test.tsx`
```typescript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

describe('Button', () => {
  it('renders children correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('handles click events', async () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    await userEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('shows loading state', () => {
    render(<Button isLoading>Submit</Button>);
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  it('disables button when loading', () => {
    render(<Button isLoading>Submit</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });
});
```

## Quality Standards

### Code Quality Checklist
- [ ] TypeScript strict mode enabled (no `any` types)
- [ ] ESLint passing with no warnings
- [ ] Prettier formatting applied
- [ ] All props typed with interfaces/types
- [ ] Error boundaries implemented
- [ ] Loading states handled
- [ ] Empty states designed

### Performance Checklist
- [ ] First Contentful Paint < 1.5s
- [ ] Largest Contentful Paint < 2.5s
- [ ] Cumulative Layout Shift < 0.1
- [ ] Time to Interactive < 3s
- [ ] Lighthouse score > 90
- [ ] Bundle size optimized (< 200KB initial)
- [ ] Images optimized (WebP, lazy loading)

### Accessibility Checklist
- [ ] WCAG 2.1 AA compliance
- [ ] Semantic HTML elements
- [ ] ARIA labels where needed
- [ ] Keyboard navigation support
- [ ] Focus indicators visible
- [ ] Color contrast ratio > 4.5:1
- [ ] Screen reader tested

### Responsive Design Checklist
- [ ] Mobile-first approach
- [ ] Breakpoints: 640px, 768px, 1024px, 1280px
- [ ] Touch targets > 44x44px
- [ ] Text readable without zoom
- [ ] No horizontal scrolling
- [ ] Tested on iOS and Android

## Constitution Alignment

- ✅ **Stateless Architecture**: Components are pure, state in stores
- ✅ **User Isolation**: Auth enforced at API layer
- ✅ **Performance**: Optimized bundle, lazy loading, caching
- ✅ **Accessibility**: WCAG compliant, semantic HTML
- ✅ **Testing**: Unit tests, E2E tests, visual regression
- ✅ **Type Safety**: TypeScript strict mode, Zod validation

## Deliverables

- [ ] Complete component library
- [ ] Type-safe API client
- [ ] State management setup
- [ ] Routing and navigation
- [ ] Authentication flow
- [ ] Error handling
- [ ] Loading states
- [ ] Responsive layouts
- [ ] Unit tests (> 80% coverage)
- [ ] E2E tests for critical paths
- [ ] Performance optimized
- [ ] Accessibility compliant

## References

- React Documentation: https://react.dev/
- Next.js Documentation: https://nextjs.org/docs
- TypeScript Handbook: https://www.typescriptlang.org/docs/
- Tailwind CSS: https://tailwindcss.com/docs
- React Query: https://tanstack.com/query/latest