bom-98-frontend-dev-guidelines Skill 技能

技能简介

bom-98-frontend-dev-guidelines 是 BOM-98 为 Claude、Codex、Claude Code 编写的一套"现代 React + Next.js 全栈前端"实践 Skill，覆盖页面结构、Server/Client Component 边界、Server Action、表单校验、数据获取、状态管理、性能优化六大主题。它针对日常前端开发中"Server Component 到底该不该 use client""form 用 React Hook Form + Zod 还是手撸""数据该走 Server Component 还是 TanStack Query""loading/error 状态放哪一层"等高频疑问给出明确指引。Skill 内含 React、Next.js、TypeScript、MUI、shadcn/ui、Supabase、TanStack Query 多技术栈示例，便于工程师在新老项目之间快速对齐规范。Quality Score 78、版本 r2、审计完整。

核心能力

• 规范化项目结构：定义 pages、routes、feature folders、imports、public exports 的目录命名与导出边界，避免循环依赖与"什么都能从任何地方 import"的混乱。
• 引导 Server Component、Client Component、Server Action、lazy loading 的正确边界：默认 Server Component，仅在 hooks、浏览器 API、事件监听等场景加 use client。
• 构建带类型校验的表单：使用 React Hook Form 管理表单状态，Zod 做运行时 + 编译时双重校验，统一错误提示与提交反馈。
• 数据获取统一抽象：Supabase 访问走 Server Component 或 Server Action，API 服务层封装 fetch，前端缓存走 TanStack Query（含 query key、invalidation、mutations）。
• 健壮的加载与错误处理：在数据/组件层就近添加 Suspense boundary、loading UI、error boundary、user notification，避免页面闪退或空白。
• 性能优化清单：memoization、cleanup、code splitting、focused subscriptions 四板斧，按需引入而非"为优化而优化"。

安装配置

• 通过 npx skillstore add bom-98/frontend-dev-guidelines 一行命令完成安装。
• 安装前确认项目已锁定 Next.js（推荐 App Router）、TypeScript ≥5、React ≥18，便于 Skill 给出的模式直接落地。
• 若项目使用 shadcn/ui，先执行 npx shadcn-ui@latest init，把 Skill 给出的 UI 规范直接接入项目。
• 推荐在 package.json 中固定依赖版本（pnpm + lockfile），避免 Server/Client Component 边界因版本升级而错乱。

使用步骤

• 第一步：新建产品页时执行 Create a React component for [feature]. Use TypeScript, accessible controls, responsive styling, and explicit loading and empty states.，让 Skill 输出带类型、可访问、响应式、带 loading/empty 状态的页面骨架。
• 第二步：构建表单时执行 Build a [form name] form with React Hook Form and Zod. Include validation messages, submission feedback, and typed values.，确保表单有校验、提示、提交反馈与强类型。
• 第三步：实现数据流时执行 Implement data loading and mutations for [entity]. Use the project API client, stable query keys, cache invalidation, and recoverable errors.，让 Skill 给出完整的数据流图。
• 第四步：性能审计时执行 Review [feature paths] for component boundaries, routing, type safety, accessibility, loading behavior, caching, and performance. Apply focused fixes and explain tradeoffs.，按需打补丁。
• 第五步：完成开发后跑一遍 next build + tsc --noEmit，确保 Server/Client Component 边界与类型都通过 CI 检查。

适用场景

• 启动新 Next.js 产品：让 Skill 作为活文档快速对齐项目规范。
• 现有 React 老项目升级到 Next.js App Router：用 Skill 指导组件边界划分与数据流重构。
• 跨团队前端协作：把 Skill 给出的 feature folders、query keys、表单约定作为团队 wiki。
• Code Review：用 Skill 的反模式清单检查 PR，避免"全 use client""滥用 useEffect""没加 loading 状态"等常见问题。
• 性能治理：用 Skill 给出的 memoization / code splitting / 订阅粒度清单逐项优化。

适用人群

• 中高级前端工程师：希望把 Next.js App Router、React Server Component 玩明白。
• Tech Lead / 前端 TL：制定团队前端规范文档，让新人快速上手。
• 全栈工程师：用 Skill 同时管好 Server Action 与 Client Component 边界。
• 中小型 SaaS 团队的独立开发者：希望用一套规范覆盖 90% 日常开发场景。

工作原理

Skill 通过结构化 prompt 把"项目结构 + 组件边界 + 数据层 + 表单 + 加载/错误 + 性能"六大主题编织成完整的决策树：先判断页面是不是需要交互（决定 Server/Client），再判断数据获取路径（决定 Supabase 直连还是走 API 层），最后判断状态归属（Server cache / Client UI state / Form state）。所有示例都遵循"先 Server Component 默认 + 加 client 仅在必要时"的现代 React 范式，并通过 React Hook Form + Zod 把表单错误降级到字段级。Skill 给出的反模式清单（无意义 use client、滥用全局状态、不加 loading/error）可直接用于 PR Review。审计确认无 prompt injection 或恶意执行。

官方链接

• Skill 详情页：https://skillstore.io/skills/bom-98-frontend-dev-guidelines
• Manifest：https://skillstore.io/api/skills/bom-98-frontend-dev-guidelines/manifest
• 源仓库：https://github.com/BOM-98/FinTracker/tree/main/.claude/skills/frontend-dev-guidelines
• 安装命令：npx skillstore add bom-98/frontend-dev-guidelines