dojocodinglabs-frontend-dev-guidelines Skill 技能

技能简介

dojocodinglabs-frontend-dev-guidelines 是 DojoCodingLabs 为 Claude、Codex、Claude Code 编写的"Next.js + shadcn/ui + Tailwind + Supabase"前端规范 Skill，专门为多前端团队设计，旨在把页面、组件、表单、数据获取、路由等高频决策收敛到一套共享约定。它针对"每个项目都自己一套写法""新人不知道用 Server Component 还是 Client Component""表单样式不统一"等真实痛点，把 Server/Server Action/Client Component 边界、shadcn/ui 与 Tailwind 协作、Supabase 上挂/客户端数据流、lazy loading + Suspense boundary、TypeScript 类型约定、路由与文件组织打包成可调用的提示模板，让 Claude 在任何 Next.js 项目里都能按同一规范输出代码。Quality Score 78、审计完整。

核心能力

• 明确 Server Component、Client Component、Server Action 三者使用边界：默认 Server Component，仅当需要 hooks、浏览器 API、事件时才加 use client。
• 提供 shadcn/ui + Tailwind CSS + React Hook Form + Zod 的组合实现模式：从表单字段到错误提示全链路统一。
• 给出 Supabase 在 Server Component 与 Client Component 两种场景下的数据获取方式（含 RLS、cookies、realtime 订阅）。
• 规范化 lazy loading、Suspense boundary、loading state、error state 的放置位置：贴近数据源/组件，避免全页面空白。
• 定义 TypeScript 的 component、prop、import、utility type 命名约定（避免 any、unknown 滥用）。
• 提供完整 feature module 示例：包含路由、组件、API helpers、loading、error、类型定义五件套。

安装配置

• 通过 npx skillstore add dojocodinglabs/frontend-dev-guidelines 一行命令安装。
• 项目需预置 Next.js（App Router）、Tailwind CSS、shadcn/ui（npx shadcn-ui@latest init）三件套，Skill 给出的模式才能 1:1 落地。
• 若使用 Supabase，先初始化 supabase init 与 .env.local，再让 Skill 接管数据访问层。
• 推荐启用 TypeScript strict 模式 + ESLint（eslint-plugin-tailwindcss），让 Skill 输出的代码直接通过 CI 检查。

使用步骤

• 第一步：新建页面时执行 Use the frontend-dev-guidelines skill to create a Next.js App Router page for a dashboard list. Include loading, error, metadata, and typed props.，Skill 会输出符合 App Router 规范的页面骨架。
• 第二步：构建表单时执行 Use the frontend-dev-guidelines skill to design a React Hook Form with Zod validation and shadcn/ui fields. Explain the component boundaries.，确保 client/server 边界清晰。
• 第三步：重构老代码时执行 Use the frontend-dev-guidelines skill to refactor this feature from client-side fetching to safer Server Components or TanStack Query patterns.，降低首屏 JS bundle。
• 第四步：规划新模块时执行 Use the frontend-dev-guidelines skill to plan a complete feature module with routes, components, API helpers, loading states, errors, and TypeScript types.，让 Skill 输出完整 feature map。
• 第五步：开发完成后跑 next build + tsc --noEmit + pnpm lint，验证 client/server 边界、shadcn 组件 import 路径、类型导出完整性。

适用场景

• 多前端团队标准化：把 Skill 作为团队 wiki，统一页面/组件/数据/表单规范。
• Next.js 老项目升级：从 Pages Router 升级到 App Router，按 Skill 规范逐步替换 fetch 模式。
• shadcn/ui + Tailwind 体系下的快速开发：直接复用 Skill 给出的组件模板。
• Supabase 数据层接入：让 Skill 接管上挂/客户端两条数据路径。
• AI 辅助编码一致性：用 Skill 给 Claude 划定清晰的实施边界，避免每次输出风格漂移。

适用人群

• 中高级 Next.js 开发者：想系统掌握 Server Component、Server Action、shadcn/ui 协作模式。
• 前端 TL / 架构师：需要把团队从"各写各的"收敛到统一规范。
• 全栈工程师：用 Skill 同时管好 Supabase 后端 + Next.js 前端的数据流。
• 独立开发者 / 创业团队：希望用一套开源技术栈（Next + shadcn + Supabase）覆盖完整产品需求。

工作原理

Skill 把"页面 → 路由 → 组件 → 表单 → 数据 → 加载/错误"串成一条完整决策链，每一步都给出 shadcn/ui 与 Tailwind 的具体实现示例。Server Component 默认开启，仅在需要 useState/useEffect/浏览器 API 时降级到 Client Component，确保最小化 client JS。表单统一走 React Hook Form + Zod，类型在两端 schema 即一致。Suspense boundary 紧贴数据源，让 loading UI 仅作用于受影响区域而非全页面。所有示例都附带明确的 client/server 边界说明，开发者只需复制粘贴即可。审计确认所有"网络/脚本/外部命令"标记均为文档示例，无 prompt injection 或恶意执行。

官方链接

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