Frontend Development

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

Before Writing Code

• Read docs/agent/architecture/frontend-workflow.md for user flow

• Read docs/agent/design/style-guide.md for Swiss International Style (REQUIRED)

• Read docs/agent/coding-standards.md for conventions

• Check existing components in apps/frontend/components/

Non-Negotiable Rules

• Swiss International Style - ALL UI changes must follow it

• rounded-none everywhere - no rounded corners, ever

• Hard shadows - shadow-[4px_4px_0px_0px_#000000] , never soft shadows

• Run npm run lint before committing

• Run npm run format before committing

• 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

'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)

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

// 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

// 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()