百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

这么牛逼的cursor功能,赶紧用起来

myzbx 2025-03-26 14:25 260 浏览


在cursor的使用过程中,我经常发现一个问题。就是在实现一个应用的时候,cursor采用的技术方案比较随机。如果我想固定一个技术方案来实现的话,特别是采用的库,使用的编程思路,Cursor的实现就不太行。


我的解决方案是,在需求描述中尽可能的去把方案说清楚。但依然和我的想法存在差距


但这么多人在用cursor,大家都会遇到这个问题。所以针对这个问题的解决方案就出来:Cursor Directory


打开界面如下。


原来这里是针对各种编程语言以及应用的约束规则。也可以认为是提示词。


通过这种明确定义的约束规则,来约束cursor对代码的使用。比如我们看下面html的约束说明

html提示词


You are an expert in Bootstrap and modern web application development.


Key Principles

- Write clear, concise, and technical responses with precise Bootstrap examples.

- Utilize Bootstrap's components and utilities to streamline development and ensure responsiveness.

- Prioritize maintainability and readability; adhere to clean coding practices throughout your HTML and CSS.

- Use descriptive class names and structure to promote clarity and collaboration among developers.


Bootstrap Usage

- Leverage Bootstrap's grid system for responsive layouts; use container, row, and column classes to structure content.

- Utilize Bootstrap components (e.g., buttons, modals, alerts) to enhance user experience without extensive custom CSS.

- Apply Bootstrap's utility classes for quick styling adjustments, such as spacing, typography, and visibility.

- Ensure all components are accessible; use ARIA attributes and semantic HTML where applicable.


Error Handling and Validation

- Implement form validation using Bootstrap's built-in styles and classes to enhance user feedback.

- Use Bootstrap's alert component to display error messages clearly and informatively.

- Structure forms with appropriate labels, placeholders, and error messages for a better user experience.


Dependencies

- Bootstrap (latest version, CSS and JS)

- Any JavaScript framework (like jQuery, if required) for interactive components.


Bootstrap-Specific Guidelines

- Customize Bootstrap's Sass variables and mixins to create a unique theme without overriding default styles.

- Utilize Bootstrap's responsive utilities to control visibility and layout on different screen sizes.

- Keep custom styles to a minimum; use Bootstrap's classes wherever possible for consistency.

- Use the Bootstrap documentation to understand component behavior and customization options.


Performance Optimization

- Minimize file sizes by including only the necessary Bootstrap components in your build process.

- Use a CDN for Bootstrap resources to improve load times and leverage caching.

- Optimize images and other assets to enhance overall performance, especially for mobile users.


Key Conventions

1. Follow Bootstrap's naming conventions and class structures to ensure consistency across your project.

2. Prioritize responsiveness and accessibility in every stage of development.

3. Maintain a clear and organized file structure to enhance maintainability and collaboration.


Refer to the Bootstrap documentation for best practices and detailed examples of usage patterns.


在这个里面明确规定了使用Bootstrap来渲染网页。并且发生错误的时候使用Bootstrap's alert来提示错误。


通过这样的方法来让cursor按照一定的规则进行代码输出。这就相当于给cursor加了一个编程规范。


01

使用方法

新建1.cursorrules文件,然后将对应的约束描述copy进去。


在compose+i 中,明确表示要参考1.cursorrules文件。


在cursor最后总结生成的点中。可以看到采用了Bootstrap中的几个功能。而这几个功能正好对应在1.cursorrules中要求的


对比一下,如果没有1.cursorrules这个文件。最终生成的方案中并没有上图中的Bootstrap实践部分。


02

代码约束一样强

我准备用rust来写一个内核监控的应用。找到rust的提示词如下


我的需求,去监控linux内核的应用,每秒读出一次kernel打印。我想用异步调用的方式来实现。输入如下


可以看到最终生成的代码和约束中是一样的。说明对代码的具体实现也是可以准确定义的。


Cursor Directory提示词库地址:

https://cursor.directory


Cursor Directory GitHub地址:

https://github.com/pontusab/cursor.directory


写在最后

今天介绍的这个功能,编程小白们估计看得有点晕。但是对程序员来说,大家应该都懂。


每个公司都有自己的一套编程规范,进行约束程序员的编码工作符合产品规定。Cursor Directory就是AI时代针对cursor的编程规范


而这个编程规范你可以自定义,参照模版自己去改即可。通过修改cursorrules,你可以打造一个专属自己的cursor编码助手。当大家都在用Cursor做应用的时候,通过cursorrules能打造差异化

#编程##人工智能#cursor#ai#

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js

介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运

中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!

前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...

SVG实现的流程图绘制

一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库

在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!

Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...