frontend-dev-guidelines
构建现代 Next.js 应用程序
Também disponível em: 0Chan-smc,0Chan-smc,BrianDai22,diet103,Dimon94,BOM-98,sickn33
使用 Next.js、React 19 和 shadcn/ui 编写现代前端代码需要理解服务器组件、数据获取模式和性能优化。此技能提供全面的指南和经过验证的模式,用于构建类型安全、高性能的 Web 应用程序。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "frontend-dev-guidelines". 创建一个新的功能组件,显示带有搜索功能的帖子列表
Resultado esperado:
- - 使用带类型化属性接口的 React.FC 模式
- - 在子组件中使用 useSuspenseQuery 获取数据
- - 在父级包装 SuspenseLoader
- - 使用 useDebounce 添加搜索状态以提高性能
- - 实现缓存优先策略以重用列表数据
- - 包含适当的加载和错误状态
- - 使用 shadcn/ui 组件(Card、Input、Button)
- - 应用 Tailwind CSS 进行响应式样式设置
A utilizar "frontend-dev-guidelines". 如何构建带有动态参数的 Next.js 路由?
Resultado esperado:
- - 创建 app/posts/[id]/page.tsx 用于动态路由
- - 使用 generateMetadata 生成动态 SEO 标题
- - 传递 params 属性以访问路由参数
- - 直接在服务器组件中获取数据
- - 添加 loading.tsx 用于加载状态
- - 添加 error.tsx 用于错误边界处理
- - 对无效数据场景使用 notFound()
Auditoria de Segurança
SeguroPure documentation skill containing markdown files with TypeScript code examples. All 631 static findings are false positives triggered by markdown code fences, documentation examples, and file path patterns. No executable code, no network calls, no file system access beyond its own resources, no environment variable access, no command execution. This is a read-only knowledge base for frontend development guidance.
Fatores de risco
⚙️ Comandos externos (3)
Pontuação de qualidade
O Que Você Pode Construir
学习现代 Next.js 模式
获取关于服务器组件、服务器操作和 App Router 架构的指导,用于 Next.js 项目
构建类型安全的应用程序
在整个代码库中应用 TypeScript 最佳实践,包括严格类型、属性接口和实用类型
优化组件性能
实现懒加载、Suspense 边界和记忆化模式,打造更快、响应更灵敏的用户界面
Tente Estes Prompts
Create a new page at app/dashboard/page.tsx that fetches user data using Server Component pattern. Include loading.tsx and error.tsx with proper Suspense boundaries.
Build a login form component using React Hook Form with Zod validation. Show how to handle form state, error messages, and submission with proper TypeScript types.
Show me how to implement cache-first data fetching with TanStack Query. Include query keys organization, cache invalidation, and optimistic update patterns.
Add a shadcn/ui Card component with custom styling using Tailwind CSS. Show proper imports, props usage, and responsive design patterns.
Melhores Práticas
- 默认使用服务器组件;仅在需要钩子或事件时添加 use client
- 将所有异步组件包装在 SuspenseLoader 中,以防止布局偏移并确保流畅的用户体验
- 为所有属性定义显式的 TypeScript 接口;完全避免使用 any 类型
Evitar
- 在每个组件上使用 use client;这会削弱 Next.js SSR 的优势
- 对加载状态使用早期返回模式;应使用 Suspense 边界
- 跳过 TypeScript 类型;仅依赖类型推断
Perguntas Frequentes
此技能是否适用于 React 18 或更早版本?
我可以在 Vue 或 Angular 项目中使用此技能吗?
此技能会创建新的项目文件吗?
使用此技能时我的代码和数据安全吗?
我可以将此技能与后端开发技能结合使用吗?
如果我需要技能中未涵盖的模式怎么办?
Detalhes do Desenvolvedor
Autor
DojoCodingLabsLicença
MIT
Repositório
https://github.com/DojoCodingLabs/claude-code-waypoint/tree/main/.claude/skills/frontend-dev-guidelinesReferência
main
Estrutura de arquivos