- 文件头注释: 必须包含文件路径和主要功能说明
// src/components/ui/button.tsx // 通用按钮组件,支持多种变体和尺寸 - 代码注释:
- 复杂逻辑必须添加行内注释
- 避免无意义的注释(如"增加计数器")
- 模块化:
- 单一组件不超过300行
- 每个组件/钩子只做一件事
- DRY原则:
- 重复逻辑抽象为自定义钩子
- 通用UI提取为共享组件
- 性能:
- 避免不必要的re-render
- 大数据列表使用虚拟滚动
- 安全:
- 所有用户输入必须验证
- 敏感操作需要二次确认
Nextjs Basic Coding Style Rules
Next.js项目编码风格规范,涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践
Nextjs Basic Coding Style Rules by liaosw97 · 1c42ab3
npx skillmds@latest add liaosw97/nextjs-basic-coding-style-rules File contents
---name: nextjs-basic-coding-style-rulesdescription: Next.js项目编码风格规范,涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践---- **文件头注释**: 必须包含文件路径和主要功能说明 ```typescript // src/components/ui/button.tsx // 通用按钮组件,支持多种变体和尺寸 ```- **代码注释**: - 复杂逻辑必须添加行内注释 - 避免无意义的注释(如"增加计数器")- **模块化**: - 单一组件不超过300行 - 每个组件/钩子只做一件事- **DRY原则**: - 重复逻辑抽象为自定义钩子 - 通用UI提取为共享组件- **性能**: - 避免不必要的re-render - 大数据列表使用虚拟滚动- **安全**: - 所有用户输入必须验证 - 敏感操作需要二次确认
liaosw97/awesome-rules-skills/tree/main/plugins/nextjs/skills/nextjs-basic-coding-style-rules commit 1c42ab35c7
Frequently asked questions
Run npx skillmds@latest add liaosw97/nextjs-basic-coding-style-rules in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Next.js项目编码风格规范,涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.