**Add your own guidelines here**
<!--
System Guidelines
Use this file to provide the AI with rules and guidelines you want it to follow.
This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs
TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need
# General guidelines
Any general rules you want the AI to follow.
For example:
* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
* Refactor code as you go to keep code clean
* Keep file sizes small and put helper functions and components in their own files.
--------------
# Design system guidelines
Rules for how the AI should make generations look like your company's design system
Additionally, if you select a design system to use in the prompt box, you can reference
your design system's components, tokens, variables and components.
For example:
* Use a base font-size of 14px
* Date formats should always be in the format “Jun 10”
* The bottom toolbar should only ever have a maximum of 4 items
* Never use the floating action button with the bottom toolbar
* Chips should always come in sets of 3 or more
* Don't use a dropdown if there are 2 or fewer options
You can also create sub sections and add more specific details
For example:
## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.
### Usage
Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
or initiating processes. They communicate interactivity and should have clear, action-oriented labels.
### Variants
* Primary Button
* Purpose : Used for the main action in a section or page
* Visual Style : Bold, filled with the primary brand color
* Usage : One primary button per section to guide users toward the most important action
* Secondary Button
* Purpose : Used for alternative or supporting actions
* Visual Style : Outlined with the primary color, transparent background
* Usage : Can appear alongside a primary button for less important actions
* Tertiary Button
* Purpose : Used for the least important actions
* Visual Style : Text-only with no border, using primary color
* Usage : For actions that should be available but not emphasized
-->
🧭 自定义指南
在此处配置你希望 AI 遵循的规则与规范。
📁 系统指南说明
使用本文件为 AI 设定行为准则。
你可根据实际需求自由增删章节、调整结构。
💡 建议：只保留最核心的规则，避免信息过载影响模型判断。
🧩 通用规则
定义 AI 在代码生成与开发过程中的基础行为准则。
| 类别 | 规则 |
|---|---|
| 布局方式 | 优先使用 Flexbox / Grid 实现响应式布局，仅在必要时使用绝对定位 |
| 代码质量 | 边写边重构，保持代码整洁、可维护 |
| 文件组织 | 控制文件体积，将辅助函数与组件拆分至独立文件 |
🎨 设计系统规范
定义 AI 如何遵循设计系统的视觉与交互标准。
📐 基础规范
| 类型 | 要求 |
|---|---|
| 字体 | 基础字号 14px |
| 日期格式 | 统一为「6 月 10 日」样式 |
| 底部工具栏 | 最多展示 4 个项 |
| 浮动按钮 | 禁止与底部工具栏同时出现 |
| 芯片（Chips） | 必须以 3 个或以上为一组出现 |
| 下拉菜单 | 选项 ≤ 2 时，改用其他交互形式 |
🔘 按钮组件（Button）
设计系统中的核心交互元素，用于触发操作或页面导航。
使用场景
- 承载重要用户操作（如提交、确认、发起流程）
- 标签需清晰表达动作意图
- 通过视觉反馈强化交互感知
组件变体
| 变体 | 用途 | 样式 | 使用建议 |
|---|---|---|---|
| 主要按钮 Primary | 页面/区块中的核心操作 | 实心填充 + 品牌主色 | 每区域最多出现一次，突出最重要操作 |
| 次要按钮 Secondary | 辅助或替代性操作 | 透明背景 + 品牌主色轮廓 | 可与主要按钮并列，用于次重要操作 |
| 三级按钮 Tertiary | 权重最低的操作 | 仅文本 + 品牌主色 | 用于需保留但无需强调的操作 |
如需扩展其他组件规范，可参考上述格式继续添加。
完善成一份真正专业的前端 Skill 规范，建议从以下几个维度去补充，这样即使不确定技术栈，也能让 AI 写出高质量的前端代码：
1. 交互与状态规范 (UX Logic)
原模板只说了按钮长什么样，没说怎么动。你可以增加：
- Loading 状态：所有异步操作（提交表单、加载列表）必须有明确的 Loading 占位或按钮禁用状态。
- 空状态 (Empty States)：列表无数据时，必须展示特定的插画或提示文字，不能直接空白。
- 反馈机制：成功操作弹出 Toast（小气泡），危险操作（如删除）必须有二次确认弹窗。
2. 响应式与布局逻辑 (Layout Principles)
不要只写字体大小，要写适配逻辑：
- 移动端优先：所有布局必须先考虑手机端体验，再通过断点扩展到桌面端。
- 间距规范：规定间距必须是 4 或 8 的倍数（例如
p-4,m-8），避免随意的13px、17px。 - 溢出处理：长文本必须处理省略号（Text Ellipsis），防止撑破容器。
3. 可访问性与语义化 (Accessibility/HTML)
这是区分“初级”和“高级”前端的关键：
- 语义化标签：严禁全篇
<div>。按钮必须用<button>，导航必须用<nav>，侧边栏用<aside>。 - 图片兜底：所有
<img>标签必须带有alt属性，并提供加载失败的占位图。
4. 性能与资源 (Performance)
- 图片处理：大图必须懒加载（Lazy Load）。
- 图标使用：优先使用 SVG 图标库，避免使用体积庞大的图片图标。
修改后的前端通用规范示例（可直接替换原注释内容）：
Markdown
# 前端通用交互规范 (Frontend Core)
* **响应式**: 采用 Mobile-First 原则，确保在 iPhone 14 等窄屏设备上无横向滚动条。
* **间距**: 统一使用 8px 栅格系统，所有 Margin/Padding 须为 4 的倍数。
* **反馈**: 任何点击后的网络请求必须在 300ms 内给出视觉反馈（Loading 或变色）。
# 组件行为规范 (Component Behavior)
## 表单 (Forms)
* **校验**: 错误信息必须实时显示在输入框下方，颜色统一为红色 (#FF0000)。
* **提交**: 点击提交后，按钮需进入 Loading 状态并禁用，防止重复提交。
## 弹窗 (Modals/Dialogs)
* **关闭**: 点击遮罩层（Backdrop）或按下 ESC 键必须能关闭弹窗。
* **层级**: 弹窗的 z-index 必须统一管理，避免被页面其他元素遮挡。
# 性能与语义 (Quality & A11y)
* **标签**: 严格遵守 HTML5 语义化，禁止使用 div 模拟 button 行为。
* **加载**: 列表项超过 10 条时，必须考虑分页或滚动加载逻辑。