frontend-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Development Agent

前端开发Agent

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

在创建或修改Next.js页面、React组件、Tailwind CSS样式、API集成、hooks或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/
```
for patterns

阅读

docs/agent/architecture/frontend-workflow.md

了解用户流程

阅读
```
docs/agent/design/style-guide.md
```
遵循瑞士国际风格（必须遵守）
阅读
```
docs/agent/coding-standards.md
```
了解编码规范
查看
```
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

瑞士国际风格 - 所有UI变更必须遵循该风格
全局使用
rounded-none
- 绝对不能有圆角
硬阴影 - 使用
```
shadow-[4px_4px_0px_0px_#000000]
```
，禁止使用软阴影
提交前运行
npm run lint
提交前运行
npm run format
所有文本区域需处理回车键事件

Project Structure

项目结构

apps/frontend/
├── app/                 # Next.js pages
│   ├── dashboard/       # Main dashboard
│   ├── builder/         # Resume builder
│   ├── tailor/          # AI tailoring
│   ├── print/           # PDF print view
│   └── settings/        # User settings
├── components/          # Reusable UI components
├── lib/                 # API client, utilities, i18n
├── hooks/               # Custom React hooks
└── messages/            # i18n translations (en, es, zh, ja)

apps/frontend/
├── app/                 # Next.js页面
│   ├── dashboard/       # 主控制面板
│   ├── builder/         # 简历生成器
│   ├── tailor/          # AI定制模块
│   ├── print/           # PDF打印视图
│   └── settings/        # 用户设置
├── components/          # 可复用UI组件
├── lib/                 # API客户端、工具函数、i18n
├── hooks/               # 自定义React hooks
└── messages/            # i18n翻译文件（en, es, zh, ja）

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`

元素	值
画布背景	`#F0F0E8` / `bg-[#F0F0E8]`
文本颜色	`#000000`
链接蓝色	`#1D4ED8` / `text-blue-700`
提示绿色	`#15803D` / `text-green-700`
警告红色	`#DC2626` / `text-red-600`
标题字体	`font-serif`
正文字体	`font-sans`
标签字体	`font-mono text-sm uppercase tracking-wider`
边框	`rounded-none border-2 border-black`
阴影	`shadow-[4px_4px_0px_0px_#000000]`
悬停效果	`hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none`

Anti-Patterns (NEVER use)

反模式（绝对禁止）

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

使用
```
rounded-*
```
（
```
rounded-none
```
除外）
渐变或模糊阴影
调色板外的颜色
淡色或柔和色调
无功能的装饰性图标

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>
  );
}

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"
      >
        执行操作
      </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"
/>

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 });

tsx

// 直接导入图标（禁止桶导入）
import FileText from 'lucide-react/dist/esm/icons/file-text';

// 动态导入大型组件
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });

API Integration

API集成

tsx

import { api } from '@/lib/api';

async function loadResumes() {
  // Use Promise.all for independent fetches
  const [resumes, jobs] = await Promise.all([
    api.get('/api/v1/resumes'),
    api.get('/api/v1/jobs'),
  ]);
  return { resumes, jobs };
}

tsx

import { api } from '@/lib/api';

async function loadResumes() {
  // 对独立请求使用Promise.all
  const [resumes, jobs] = await Promise.all([
    api.get('/api/v1/resumes'),
    api.get('/api/v1/jobs'),
  ]);
  return { resumes, jobs };
}

i18n

i18n国际化

tsx

import { useTranslations } from '@/lib/i18n';

export function MyComponent() {
  const { t } = useTranslations();
  return <h1>{t('dashboard.title')}</h1>;
}

tsx

import { useTranslations } from '@/lib/i18n';

export function MyComponent() {
  const { t } = useTranslations();
  return <h1>{t('dashboard.title')}</h1>;
}

Checklist Before Committing

提交前检查清单

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

```
npm run lint
```
检查通过
已运行
```
npm run format
```
格式化代码
所有元素都使用了
```
rounded-none
```
使用硬阴影（无软阴影）
仅使用瑞士风格调色板
排版正确（标题用衬线字体、标签用等宽字体、正文用无衬线字体）
文本区域已添加回车键处理
图标采用直接导入（非桶导入）
大型组件使用
```
next/dynamic
```
动态导入
独立请求使用
```
Promise.all()
```