# Vibe Coding 实用 Prompt 片段合集

# 页面比较慢的时候，可以先显示出来一部分内容，不必等所有数据都准备好再显示

By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user.

# 导航栏中，当前选项需要高亮

A common UI pattern is to show an active link to indicate to the user what page they are currently on. To do this, you need to get the user's current path from the URL.

# 用户不用等待页面加载完，就可以点导航栏跳走

The user doesn't have to wait for the page to finish loading before navigating away (this is called interruptable navigation).

# 加载骨架屏，数据没有返回的时候用骨架屏

A loading skeleton is a simplified version of the UI. Many websites use them as a placeholder (or fallback) to indicate to users that the content is loading.

# 与骨架屏搭配，当没有数据的时候用suspense来展示别的内容（比如骨架屏）

Suspense allows you to defer rendering parts of your application until some condition is met (e.g. data is loaded). You can wrap your dynamic components in Suspense. Then, pass it a fallback component to show while the dynamic component loads.

# 鼓励一下用suspense

Don't be afraid to experiment with Suspense and see what works best, it's a powerful API that can help you create more delightful user experiences.

# 防抖，虽然用户输入要监听，但处理onChange事件的函数不需要太敏感

Debouncing is a programming practice that limits the rate at which a function can fire. In our case, you only want to query the database when the user has stopped typing.

# 设计友好的报错页面

When going to production, you want to more gracefully show a message to the user when something unexpected happens.

# 设计友好的404页面

you can show a 404 error to tell the user the resource they're trying to access hasn't been found.

# 可访问性，面向少数群体用户友好

Accessibility refers to designing and implementing web applications that everyone can use, including those with disabilities.

# 焦点轮廓，页面中选中的元素有一个轮廓标识

Focus Outline: The fields are properly styled to show an outline when they are in focus. This is critical for accessibility as it visually indicates the active element on the page, helping both keyboard and screen reader users to understand where they are on the form. 

# 网页元数据对于SEO非常必要

Metadata plays a significant role in enhancing a webpage's SEO, making it more accessible and understandable for search engines and social media platforms. Proper metadata helps search engines effectively index webpages, improving their ranking in search results. Additionally, metadata like Open Graph improves the appearance of shared links on social media, making the content more appealing and informative for users.