Menu
产品级 UI 设计规范 — React + Tailwind CSS，含组件库、布局系统、无障碍标准
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
学术论文全流程 — research → write → review → finalize，含文献综述、论文撰写、审稿回复
算法与数据结构 — 数组/链表/树/图/堆/哈希/DP/排序/BFS-DFS/线段树/复杂度分析
API 设计 — RESTful/GraphQL/gRPC/OpenAPI/向后兼容/版本策略
后端 API — REST/GraphQL 设计, JWT/OAuth 认证, 输入验证/限流/缓存
代码审查 — 正确性/安全/性能/可维护性审查维度, 基于严重级别的反馈流程
数据分析 — pandas/numpy 数据清洗/聚合/可视化, 统计检验/A-B测试/SQL
| name | frontend-design |
| description | 产品级 UI 设计规范 — React + Tailwind CSS，含组件库、布局系统、无障碍标准 |
基于 React + Tailwind CSS 的前端 UI 设计系统。
md:/lg: 断点扩展// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a5f' },
surface: { DEFAULT: '#ffffff', muted: '#f8fafc', border: '#e2e8f0' }
},
spacing: { 18: '4.5rem', 88: '22rem' },
borderRadius: { 'xl': '0.75rem', '2xl': '1rem' }
}
}
}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{items.map(item => <Card key={item.id} {...item} />)}
</div>
<dialog className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center">
<div className="bg-white rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl" role="dialog" aria-modal="true">
{children}
</div>
</dialog>