React + TypeScript + Vite
使用 Cursor 和 Figma MCP 服务器创建一个简单文字编辑器的测试。 这个测试会引导 Cursor 完成所有组件的创建。
RuniEllingsgaard
README
React + TypeScript + Vite
此模板提供了一个最小化的设置,以便在 Vite 中使用 React,并支持 HMR 和一些 ESLint 规则。
目前,有两个官方插件可用:
- @vitejs/plugin-react 使用 Babel 实现快速刷新
- @vitejs/plugin-react-swc 使用 SWC 实现快速刷新
扩展 ESLint 配置
如果您正在开发生产应用程序,我们建议更新配置以启用类型感知的 lint 规则:
export default tseslint.config({
extends: [
// 移除 ...tseslint.configs.recommended 并替换为以下内容
...tseslint.configs.recommendedTypeChecked,
// 或者,使用此选项以获得更严格的规则
...tseslint.configs.strictTypeChecked,
// (可选)添加此选项以获得样式规则
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// 其他选项...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
您还可以安装 eslint-plugin-react-x 和 eslint-plugin-react-dom 以获得 React 特定的 lint 规则:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// 添加 react-x 和 react-dom 插件
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// 其他规则...
// 启用其推荐的 typescript 规则
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
推荐服务器
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
MCP Package Docs Server
促进大型语言模型高效访问和获取 Go、Python 和 NPM 包的结构化文档,通过多语言支持和性能优化来增强软件开发。
Claude Code MCP
一个实现了 Claude Code 作为模型上下文协议(Model Context Protocol, MCP)服务器的方案,它可以通过标准化的 MCP 接口来使用 Claude 的软件工程能力(代码生成、编辑、审查和文件操作)。
@kazuph/mcp-taskmanager
用于任务管理的模型上下文协议服务器。它允许 Claude Desktop(或任何 MCP 客户端)在基于队列的系统中管理和执行任务。
mermaid-mcp-server
一个模型上下文协议 (MCP) 服务器,用于将 Mermaid 图表转换为 PNG 图像。
Jira-Context-MCP
MCP 服务器向 AI 编码助手(如 Cursor)提供 Jira 工单信息。

Linear MCP Server
一个模型上下文协议(Model Context Protocol)服务器,它与 Linear 的问题跟踪系统集成,允许大型语言模型(LLM)通过自然语言交互来创建、更新、搜索和评论 Linear 问题。

Sequential Thinking MCP Server
这个服务器通过将复杂问题分解为顺序步骤来促进结构化的问题解决,支持修订,并通过完整的 MCP 集成来实现多条解决方案路径。
Curri MCP Server
通过管理文本笔记、提供笔记创建工具以及使用结构化提示生成摘要,从而实现与 Curri API 的交互。