Imported from QingQiuGeek/nextjs-ethers-demo (
AGENTS.md). Install upstream withnpx skills add QingQiuGeek/nextjs-ethers-demo. Copyright stays with the author.
This is NOT the Next.js you know
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ before writing any code. Heed deprecation notices.
Frontend Development Guidelines
1. 优先使用 UI 组件库
- 如果
package.json中有使用 UI 组件库（如 Ant Design, Material-UI, 或类似的框架），请尽量优先使用这些库提供的组件。 - 使用 UI 组件库的组件可以帮助减少手动写基础标签（如
li,div,h1等），从而使代码更简洁，结构更清晰。
2. 组件复用
- 无论是基础 HTML 标签还是 UI 组件，都要考虑到复用性。每当有相似的结构或功能时，封装成可复用的组件。
- 组件化不仅能减少重复代码量，还能提高代码的可维护性和可扩展性。
3. 样式使用 TailwindCSS
- 在项目中，如果
package.json中已经配置了 TailwindCSS，请优先使用它来编写样式。 - TailwindCSS 提供了快速开发、可配置的原子化 CSS 类，可以帮助我们避免重复编写样式规则。
- 在使用 TailwindCSS 时，要注意：
- 通过简洁的类名控制布局和样式。
- 尽量避免过多的动态效果（如动画和过度的过渡），因为这些效果可能导致页面卡顿，影响性能。
- 关注实用性，保持页面的响应速度和流畅度。
4. 避免过多的基础标签
- 基础标签（如
div,span,ul,li等）应尽量避免直接使用，除非确实没有合适的 UI 组件。 - 尽量使用更具语义的标签和封装好的 UI 组件，这不仅使页面更美观，也能增强可访问性（ SEO 和无障碍）。
5. 确保标签闭合与语法正确
- 确保所有 HTML 标签都正确闭合，避免遗漏闭合标签导致的页面渲染问题。
- 始终保持正确的基础语法，避免产生 HTML、 JSX 或 Vue 模板语法错误。
- 可以使用 ESLint 等静态代码分析工具来检测潜在的语法问题，并确保代码符合最佳实践。
6. 美观和简洁的设计
- UI 设计要遵循一致性原则，保持色调和布局的一致性，避免过于繁杂的元素。
- 使用组件库时，优先考虑其设计规范，避免自定义过多样式，保持一致性。
7. 加上必要的注释
- 核心代码、长代码、复杂代码加上必要的注释，便于理解， html 标签、组件不需要注释， js/ts 需要。
总结
目标是通过合理的组件化、复用和 TailwindCSS，减少代码量，提高代码质量，同时确保页面简洁、美观和高效。每次开发时，都要优先考虑组件的复用性和 UI 库的使用，而非从头开始编写基础标签和样式。保持语法规范并使用工具（如 ESLint）来帮助检测代码质量，是确保代码健康的有效手段。