Habilidades frontend-dev-guidelines
🎨

frontend-dev-guidelines

Seguro

应用 Next.js 15 前端最佳实践

Também disponível em: 0Chan-smc,BrianDai22,diet103,Dimon94,DojoCodingLabs,BOM-98,sickn33

前端代码需要为 Next.js 15 功能（如 Server Components 和 App Router）保持一致的规范。此技能为 React 19、TypeScript、Shadcn/ui 组件和 Tailwind CSS 提供全面的指南，以确保应用程序的可维护性和高性能。

Suporta: Claude Codex Code(CC)
⚠️ 68 Ruim
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "frontend-dev-guidelines". Create a product card component that displays an image, title, price, and add-to-cart button using Shadcn/ui components.

Resultado esperado:

  • • Server Component with typed props interface
  • • Card, CardHeader, CardTitle, CardContent from @/components/ui/card
  • • Image optimization with next/image component
  • • Button with variant prop from Shadcn/ui
  • • Tailwind utility classes for responsive layout
  • • TypeScript interface for Product type
  • • cn() utility for conditional styling

Auditoria de Segurança

Seguro
v2 • 1/10/2026

Pure documentation skill containing only markdown guidelines. No executable code, scripts, network calls, file system access, or environment variable usage. This is a prompt-based skill that provides development guidance to AI agents.

1
Arquivos analisados
653
Linhas analisadas
0
achados
2
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
83
Conteúdo
31
Comunidade
100
Segurança
70
Conformidade com especificações

O Que Você Pode Construir

构建 Next.js 页面

使用 Server Components、路由、元数据和适当的文件结构创建新页面

使用 Shadcn/ui 样式

使用 Tailwind CSS 和条件类工具应用可访问的 UI 组件

迁移到 Server Components

将客户端模式转换为 Server Components 以获得更好的性能

Tente Estes Prompts

创建简单组件 
创建一个新的 Server Component 用于显示用户资料，使用 Shadcn/ui Card 组件和适当的 TypeScript 接口。
构建数据获取页面 
创建一个页面，使用 Server Component 模式从 API 端点获取文章，并包含 loading.tsx 和 error.tsx 边界。
实现带操作的表单 
创建一个表单组件，使用 Server Action 创建新文章，包含 zod 验证和 Shadcn/ui 输入组件。
优化性能 
审查并优化以下页面组件：识别使用 Server Components 的机会，添加 Suspense 流式传输，并实施适当的缓存策略。

Melhores Práticas

  • 默认使用 Server Components 进行数据获取和渲染以减少包体积
  • 使用 @/components/ui 中的 Shadcn/ui 组件和 Tailwind CSS 保持样式一致
  • 应用严格的 TypeScript，使用显式属性类型，禁止隐式 any

Evitar

  • 避免不必要地添加 'use client' - 这会增加包体积并禁用 Server Component 的优势
  • 不要在 Server Components 中使用 useEffect 进行数据获取 - 直接使用 fetch
  • 避免内联样式 - 使用 Tailwind CSS 工具类和 cn() 辅助函数进行条件样式设置

Perguntas Frequentes

此技能是否与旧版 Next.js 兼容？
此技能针对 Next.js 15。一些模式如 Server Components 和 App Router 可以在 Next.js 13+ 中使用，但语法可能有所不同。
Server Component 模式有什么限制？
Server Components 不能使用 hooks、浏览器 API 或事件处理程序。将交互性移至 Client Components 并用 Suspense 包装。
我可以将此技能与其他 UI 组件库一起使用吗？
此技能专注于 Shadcn/ui 模式。通用原则也适用于其他库，但导入路径和类名会有所不同。
使用 Server Components 时我的数据安全吗？
可以。Server Components 在您的基础设施上执行。数据永远不会离开您的服务器 - 它在将 HTML 发送到客户端之前被获取和渲染。
为什么我的组件在客户端而不是服务器上渲染？
检查顶部的 'use client' 指令。如果缺失，确保没有使用 hooks、浏览器 API 或事件处理程序。删除任何客户端模式。
这与其他前端技能相比如何？
此技能提供详细的 Next.js 15 模式。可与通用 React 技能结合使用以了解组件生命周期，或与 CSS 技能结合使用以进行 Tailwind 之外的自定义样式。

Detalhes do Desenvolvedor

Autor

0Chan-smc

Licença

MIT

Repositório

https://github.com/0Chan-smc/claude-code-workflow-lab/tree/main/.claude/skills/frontend-dev-guidelines

Referência

main

Estrutura de arquivos

📄 SKILL.md