mcpField
F
frontend-dev

frontend-dev

github.com/srbhr开发28.9k64 次安装1 周前更新
代码仓库

关于 frontend-dev

面向 Next.js 和 React 前端开发的编码技能，指导页面、组件、Tailwind CSS、API 集成、hooks 和 i18n 的实现。它强调 Swiss International Style、项目约定和提交前检查。

主要功能

  1. 01提供前端开发前的文档与组件检查步骤
  2. 02规定 Swiss 风格颜色、字体和阴影
  3. 03涵盖组件、textarea 与 API 集成示例
  4. 04指导图标导入和重型组件动态加载
  5. 05列出 lint、format 与界面检查清单

适用场景

  1. 01按项目规范创建或修改 React 组件
  2. 02为 Next.js 页面接入 API 并并行请求
  3. 03检查界面风格与提交前质量要求

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/srbhr/resume-matcher --skill frontend-dev

安装后在 Claude Code 中输入/frontend-dev确认已加载。

详细介绍

前端开发

在创建或修改 Next.js 页面、React 组件、Tailwind CSS 样式、API 集成、Hooks 或 i18n 时使用。

编写代码之前

  1. 阅读 docs/agent/architecture/frontend-workflow.md 了解用户流程
  2. 阅读 docs/agent/design/style-guide.md 了解瑞士国际主义风格（必读）
  3. 阅读 docs/agent/coding-standards.md 了解编码约定
  4. 检查 apps/frontend/components/ 中已有的组件

不可协商的规则

  1. 瑞士国际主义风格：所有 UI 改动都必须遵循该风格
  2. 全局使用 rounded-none，不要任何圆角
  3. 硬阴影：使用 shadow-[4px_4px_0px_0px_#000000]，禁止柔和阴影
  4. 提交前运行 npm run lint
  5. 提交前运行 npm run format
  6. 所有文本域都要处理 Enter 键

瑞士国际主义风格速查表

元素值
画布背景#F0F0E8 / bg-[#F0F0E8]
墨色文字#000000
Hyper Blue#1D4ED8 / text-blue-700
Signal Green#15803D / text-green-700
Alert Red#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
反模式（绝对禁止）
  • rounded-*（rounded-none 除外）
  • 渐变或模糊阴影
  • 调色板之外的颜色
  • 粉彩或柔和色彩
  • 没有功能作用的装饰性图标

模式

新组件
'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>
  );
}
文本域（Enter 键修复）
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" />
包体积优化
// 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 集成
// Use Promise.all for independent fetches
const [resumes, jobs] = await Promise.all([
  api.get('/api/v1/resumes'),
  api.get('/api/v1/jobs'),
]);

检查清单

  • npm run lint 通过
  • 已运行 npm run format
  • 所有元素都使用 rounded-none
  • 仅使用硬阴影和瑞士配色
  • 字体排版正确（标题衬线体、标签等宽体、正文无衬线体）
  • 文本域带有 Enter 键处理器
  • 图标直接导入，体积较大的组件使用 next/dynamic
  • 相互独立的请求使用 Promise.all()

评论

支持 Markdown