⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

前端开发规范与瑞士国际主义风格指南 - Next.js、React、Tailwind CSS 最佳实践

frontend-dev by srbhr/resume-matcher

64 周安装量

26,500 GitHub Stars

GitHub

安装命令

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

React 代码规范前端架构

🇨🇳中文介绍

前端开发

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

编写代码前

阅读 docs/agent/architecture/frontend-workflow.md 了解用户流程
阅读 docs/agent/design/style-guide.md 了解瑞士国际主义风格 (必需)
阅读 docs/agent/coding-standards.md 了解编码规范
检查 apps/frontend/components/ 中现有的组件

不可协商的规则

瑞士国际主义风格 - 所有 UI 变更都必须遵循它
rounded-none 处处使用 - 永远不要圆角
硬阴影 - shadow-[4px_4px_0px_0px_#000000]，永远不要软阴影

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

瑞士国际主义风格快速参考

元素	值
画布背景	`#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`

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

文本区域 (回车键修复)

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

// 直接导入图标 (不要使用桶导入)
import FileText from 'lucide-react/dist/esm/icons/file-text';

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

// 对独立的请求使用 Promise.all
const [resumes, jobs] = await Promise.all([
  api.get('/api/v1/resumes'),
  api.get('/api/v1/jobs'),
]);

npm run lint 通过
已运行 npm run format
所有元素都使用 rounded-none
仅使用硬阴影和瑞士风格调色板
正确的排版 (衬线标题、等宽标签、无衬线正文)
文本区域有回车键处理程序
图标直接导入，重型组件使用 next/dynamic
独立的请求使用 Promise.all()

🇺🇸English

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
Runnpm run lint before committing
Runnpm 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	/

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

Weekly Installs

Repository

srbhr/resume-matcher

GitHub Stars

26.5K

First Seen

Feb 12, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli61

github-copilot60

codex59

opencode59

kimi-cli57

amp57

React视图过渡API使用指南：实现原生浏览器动画与状态管理

9,100 周安装