Frontend Dev

---
name: frontend-dev
description: |
  Frontend development skill for Resume Matcher. Handles Next.js pages, React components, Tailwind CSS with Swiss International Style, API integration, hooks, and i18n. Use when creating or modifying frontend code.
---

# Frontend Development

> Use when creating or modifying Next.js pages, React components, Tailwind CSS styles, API integration, hooks, or i18n.

## Before Writing Code

1. Read `docs/agent/architecture/frontend-workflow.md` for user flow
2. Read `docs/agent/design/style-guide.md` for Swiss International Style (**REQUIRED**)
3. Read `docs/agent/coding-standards.md` for conventions
4. Check existing components in `apps/frontend/components/`

## Non-Negotiable Rules

1. **Swiss International Style** - ALL UI changes must follow it
2. **`rounded-none`** everywhere - no rounded corners, ever
3. **Hard shadows** - `shadow-[4px_4px_0px_0px_#000000]`, never soft shadows
4. **Run `npm run lint`** before committing
5. **Run `npm run format`** before committing
6. **Enter key handling** on all textareas

## Swiss International Style Quick Reference

| Element | Value |
|---------|-------|
| Canvas bg | `#F0F0E8` / `bg-[#F0F0E8]` |
| Ink text | `#000000` |
| Hyper Blue | `#1D4ED8` / `text-blue-700` |
| Signal Green | `#15803D` / `text-green-700` |
| Alert Red | `#DC2626` / `text-red-600` |
| Headers | `font-serif` |
| Body | `font-sans` |
| Labels | `font-mono text-sm uppercase tracking-wider` |
| Borders | `rounded-none border-2 border-black` |
| Shadows | `shadow-[4px_4px_0px_0px_#000000]` |
| Hover | `hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none` |

### Anti-Patterns (NEVER)

- `rounded-*` (except `rounded-none`)
- Gradients or blur shadows
- Colors outside the palette
- Pastel or soft colors
- Decorative icons without function

## Patterns

### New Component

```tsx
'use client';

interface MyComponentProps {
  title: string;
  onAction: () => void;
}

export function MyComponent({ title, onAction }: MyComponentProps) {
  return (
    <div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">
      <h3 className="font-serif text-xl mb-4">{title}</h3>
      <button
        onClick={onAction}
        className="rounded-none border-2 border-black px-4 py-2 bg-blue-700 text-white shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all"
      >
        Action
      </button>
    </div>
  );
}
```

### Textarea (Enter key fix)

```tsx
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === 'Enter') e.stopPropagation();
};

<textarea onKeyDown={handleKeyDown} className="w-full rounded-none border-2 border-black p-3 font-sans" />
```

### Bundle Optimization

```tsx
// Direct icon import (NOT barrel import)
import FileText from 'lucide-react/dist/esm/icons/file-text';

// Dynamic import for heavy components
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });
```

### API Integration

```tsx
// Use Promise.all for independent fetches
const [resumes, jobs] = await Promise.all([
  api.get('/api/v1/resumes'),
  api.get('/api/v1/jobs'),
]);
```

## Checklist

- [ ] `npm run lint` passes
- [ ] `npm run format` run
- [ ] `rounded-none` on all elements
- [ ] Hard shadows, Swiss palette only
- [ ] Correct typography (serif headers, mono labels, sans body)
- [ ] Textareas have Enter key handler
- [ ] Icons imported directly, heavy components use `next/dynamic`
- [ ] Independent fetches use `Promise.all()`