重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
frontend-dev by srbhr/resume-matcher
npx skills add https://github.com/srbhr/resume-matcher --skill frontend-dev适用于创建或修改 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/ 中现有的组件rounded-none 处处使用 - 永远不要圆角shadow-[4px_4px_0px_0px_#000000],永远不要软阴影广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npm run lintnpm run format| 元素 | 值 |
|---|---|
| 画布背景 | #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 formatrounded-nonenext/dynamicPromise.all()每周安装量
62
代码仓库
GitHub 星标
26.5K
首次出现
2026年2月12日
安全审计
安装于
gemini-cli61
github-copilot60
codex59
opencode59
kimi-cli57
amp57
Use when creating or modifying Next.js pages, React components, Tailwind CSS styles, API integration, hooks, or i18n.
docs/agent/architecture/frontend-workflow.md for user flowdocs/agent/design/style-guide.md for Swiss International Style (REQUIRED)docs/agent/coding-standards.md for conventionsapps/frontend/components/rounded-none everywhere - no rounded corners, evershadow-[4px_4px_0px_0px_#000000], never soft shadowsnpm run lint before committingnpm run format before committing| Element | Value |
|---|---|
| Canvas bg | #F0F0E8 / bg-[#F0F0E8] |
| Ink text | #000000 |
| Hyper Blue | #1D4ED8 / text-blue-700 |
| Signal Green | #15803D / text-green-700 |
| Alert Red | / |
rounded-* (except 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" />
// 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 });
// 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 passesnpm run format runrounded-none on all elementsnext/dynamicPromise.all()Weekly Installs
62
Repository
GitHub Stars
26.5K
First Seen
Feb 12, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli61
github-copilot60
codex59
opencode59
kimi-cli57
amp57
React视图过渡API使用指南:实现原生浏览器动画与状态管理
9,100 周安装
AI博客文章撰写技能:自动研究、写作与封面生成完整指南
731 周安装
Edict 多智能体编排系统:基于唐朝三省六部制的 AI 智能体治理架构
740 周安装
Google Apps Script 自动化脚本教程 - 免费实现 Google Sheets 与 Workspace 自动化
726 周安装
产品探索流程完整指南:从问题界定到方案验证,降低产品决策风险
726 周安装
iOS WeatherKit 使用指南:获取天气数据、预报与警报的 Swift 实现
741 周安装
iOS Swift Core Bluetooth 开发指南:BLE 扫描连接与数据交换
743 周安装
#DC2626text-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 |