Habilidades frontend-dev-guidelines
🖥️
frontend-dev-guidelines
Seguro ⚙️
Comandos externos⚡
Contém scripts📁
Acesso ao sistema de arquivos🌐
Acesso à rede
应用 Next.js 和 React 前端指南
Também disponível em: 0Chan-smc,0Chan-smc,BrianDai22,diet103,Dimon94,DojoCodingLabs,sickn33
此技能提供使用 Next.js、React 19 和 shadcn/ui 构建现代前端应用程序的全面指南。它涵盖服务器组件、数据获取、表单、样式和性能优化等基本模式。
Suporta: Claude Codex Code(CC)
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". 如何在 Next.js App Router 中创建新页面？
Resultado esperado:
- 默认将 app/[route]/page.tsx 创建为服务器组件
- 直接在组件中获取数据（无需使用 hooks）
- 添加 loading.tsx 用于 Suspense 加载状态
- 添加 error.tsx 用于错误边界处理
- 导出元数据用于 SEO
- 使用 Tailwind CSS 进行所有样式设置
A utilizar "frontend-dev-guidelines". 何时应该使用服务器组件还是客户端组件？
Resultado esperado:
- 默认使用服务器组件以获得更好的性能
- 仅在需要时添加 'use client' 指令：
- - React hooks（useState、useEffect、useContext）
- - 事件处理程序（onClick、onChange）
- - 纯浏览器 API
- 将复杂计算保留在服务器端以减少客户端包体积
A utilizar "frontend-dev-guidelines". 如何使用 shadcn/ui 为组件添加样式？
Resultado esperado:
- 从 @/components/ui/[component] 导入组件
- 使用 cn() 工具函数进行条件类名处理
- 直接对元素应用 Tailwind 类
- 通过组件 props 自定义变体
- 利用 Radix UI 原语实现可访问性
Auditoria de Segurança
Segurov5 • 1/16/2026
This skill is pure documentation containing markdown files with frontend development guidelines. All 628 static findings are false positives - the scanner detected patterns in documentation (markdown backticks, TypeScript code examples, file path references) that were misidentified as security risks. The skill contains no executable code, no network calls, no file system operations, and no command execution.
12
Arquivos analisados
5,791
Linhas analisadas
4
achados
5
Total de auditorias
Fatores de risco
⚙️ Comandos externos (480)
resources/common-patterns.md:11-31 resources/common-patterns.md:31-33 resources/common-patterns.md:33-41 resources/common-patterns.md:41-109 resources/common-patterns.md:109-122 resources/common-patterns.md:122-160 resources/common-patterns.md:160-171 resources/common-patterns.md:171-172 resources/common-patterns.md:172-180 resources/common-patterns.md:180-215 resources/common-patterns.md:215-223 resources/common-patterns.md:223-255 resources/common-patterns.md:255-269 resources/common-patterns.md:269-275 resources/common-patterns.md:275-279 resources/common-patterns.md:279-285 resources/common-patterns.md:285-289 resources/common-patterns.md:289-298 resources/common-patterns.md:298-310 resources/complete-examples.md:11-85 resources/complete-examples.md:85-146 resources/complete-examples.md:146-149 resources/complete-examples.md:149-153 resources/complete-examples.md:153-159 resources/complete-examples.md:159-161 resources/complete-examples.md:161-182 resources/complete-examples.md:182-186 resources/complete-examples.md:186-192 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:215-219 resources/complete-examples.md:219-240 resources/complete-examples.md:240-244 resources/complete-examples.md:244-265 resources/complete-examples.md:265-269 resources/complete-examples.md:269-283 resources/complete-examples.md:283-289 resources/complete-examples.md:289-309 resources/complete-examples.md:309-327 resources/complete-examples.md:327-333 resources/complete-examples.md:333-379 resources/complete-examples.md:379-385 resources/complete-examples.md:385-492 resources/complete-examples.md:492-498 resources/complete-examples.md:498-533 resources/complete-examples.md:533-546 resources/complete-examples.md:546-590 resources/complete-examples.md:590-602 resources/complete-examples.md:602-641 resources/complete-examples.md:641-647 resources/complete-examples.md:647-743 resources/complete-examples.md:743-749 resources/complete-examples.md:749-808 resources/complete-examples.md:808-814 resources/complete-examples.md:814-855 resources/component-patterns.md:11 resources/component-patterns.md:19-38 resources/component-patterns.md:38-42 resources/component-patterns.md:42-60 resources/component-patterns.md:60-74 resources/component-patterns.md:74-78 resources/component-patterns.md:78-101 resources/component-patterns.md:101-110 resources/component-patterns.md:110-114 resources/component-patterns.md:114-117 resources/component-patterns.md:117-121 resources/component-patterns.md:121-132 resources/component-patterns.md:132-143 resources/component-patterns.md:143-146 resources/component-patterns.md:146-157 resources/component-patterns.md:157-160 resources/component-patterns.md:160-178 resources/component-patterns.md:178-188 resources/component-patterns.md:188-301 resources/component-patterns.md:301-317 resources/component-patterns.md:317-337 resources/component-patterns.md:337-353 resources/component-patterns.md:353-359 resources/component-patterns.md:359-368 resources/component-patterns.md:368-374 resources/component-patterns.md:374-382 resources/component-patterns.md:382-408 resources/component-patterns.md:408-413 resources/component-patterns.md:413-437 resources/component-patterns.md:437-445 resources/component-patterns.md:445-465 resources/component-patterns.md:465-469 resources/component-patterns.md:469-483 resources/component-patterns.md:483-490 resources/component-patterns.md:490-491 resources/component-patterns.md:491-492 resources/component-patterns.md:492-493 resources/component-patterns.md:493-495 resources/data-fetching.md:11 resources/data-fetching.md:11 resources/data-fetching.md:14 resources/data-fetching.md:22-41 resources/data-fetching.md:41-47 resources/data-fetching.md:47-48 resources/data-fetching.md:48-68 resources/data-fetching.md:68-102 resources/data-fetching.md:102-107 resources/data-fetching.md:107-108 resources/data-fetching.md:108-109 resources/data-fetching.md:109-119 resources/data-fetching.md:119-147 resources/data-fetching.md:147-160 resources/data-fetching.md:160-176 resources/data-fetching.md:176-186 resources/data-fetching.md:186-194 resources/data-fetching.md:194-204 resources/data-fetching.md:204-209 resources/data-fetching.md:209-213 resources/data-fetching.md:213-227 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:265-269 resources/data-fetching.md:269 resources/data-fetching.md:269-280 resources/data-fetching.md:280-290 resources/data-fetching.md:290-293 resources/data-fetching.md:293-294 resources/data-fetching.md:294-295 resources/data-fetching.md:295-296 resources/data-fetching.md:296-298 resources/data-fetching.md:298-306 resources/data-fetching.md:306-346 resources/data-fetching.md:346-350 resources/data-fetching.md:350-383 resources/data-fetching.md:383-391 resources/data-fetching.md:391-406 resources/data-fetching.md:406-408 resources/data-fetching.md:408-412 resources/data-fetching.md:412-426 resources/data-fetching.md:426-430 resources/data-fetching.md:430-442 resources/data-fetching.md:442-450 resources/data-fetching.md:450-459 resources/data-fetching.md:459-469 resources/data-fetching.md:469-484 resources/data-fetching.md:484-490 resources/data-fetching.md:490-501 resources/data-fetching.md:501-509 resources/data-fetching.md:509-538 resources/data-fetching.md:538-542 resources/data-fetching.md:542-583 resources/data-fetching.md:583-592 resources/data-fetching.md:592-621 resources/data-fetching.md:621-629 resources/data-fetching.md:629-673 resources/data-fetching.md:673-677 resources/data-fetching.md:677-708 resources/data-fetching.md:708-716 resources/data-fetching.md:716-729 resources/data-fetching.md:729-733 resources/data-fetching.md:733-747 resources/data-fetching.md:747-755 resources/data-fetching.md:755-759 resources/data-fetching.md:759 resources/file-organization.md:20 resources/file-organization.md:21 resources/file-organization.md:22 resources/file-organization.md:25-41 resources/file-organization.md:41-53 resources/file-organization.md:53-54 resources/file-organization.md:54-55 resources/file-organization.md:55-56 resources/file-organization.md:56-59 resources/file-organization.md:59-67 resources/file-organization.md:67-75 resources/file-organization.md:75-77 resources/file-organization.md:77-119 resources/file-organization.md:119-128 resources/file-organization.md:128-131 resources/file-organization.md:131-137 resources/file-organization.md:137-145 resources/file-organization.md:145-156 resources/file-organization.md:156-169 resources/file-organization.md:169-176 resources/file-organization.md:176-180 resources/file-organization.md:180-186 resources/file-organization.md:186-193 resources/file-organization.md:193-199 resources/file-organization.md:199-206 resources/file-organization.md:206-210 resources/file-organization.md:210-218 resources/file-organization.md:218-222 resources/file-organization.md:222 resources/file-organization.md:222-223 resources/file-organization.md:223 resources/file-organization.md:223-224 resources/file-organization.md:224 resources/file-organization.md:224-225 resources/file-organization.md:225 resources/file-organization.md:225-229 resources/file-organization.md:229-239 resources/file-organization.md:239-244 resources/file-organization.md:244-245 resources/file-organization.md:245-246 resources/file-organization.md:246-247 resources/file-organization.md:247-250 resources/file-organization.md:250-253 resources/file-organization.md:253-256 resources/file-organization.md:256-260 resources/file-organization.md:260-263 resources/file-organization.md:263-266 resources/file-organization.md:266-274 resources/file-organization.md:274-276 resources/file-organization.md:276-280 resources/file-organization.md:280-283 resources/file-organization.md:283-284 resources/file-organization.md:284-285 resources/file-organization.md:285-289 resources/file-organization.md:289 resources/file-organization.md:289-291 resources/file-organization.md:291-296 resources/file-organization.md:296-300 resources/file-organization.md:300 resources/file-organization.md:300-302 resources/file-organization.md:302-306 resources/file-organization.md:306-310 resources/file-organization.md:310-312 resources/file-organization.md:312-317 resources/file-organization.md:317-321 resources/file-organization.md:321-323 resources/file-organization.md:323-327 resources/file-organization.md:327-341 resources/file-organization.md:341-363 resources/file-organization.md:363-371 resources/file-organization.md:371-397 resources/file-organization.md:397-409 resources/file-organization.md:409-425 resources/file-organization.md:425-428 resources/file-organization.md:428-434 resources/file-organization.md:434-440 resources/file-organization.md:440-485 resources/loading-and-error-states.md:11-23 resources/loading-and-error-states.md:23-35 resources/loading-and-error-states.md:35-47 resources/loading-and-error-states.md:47-51 resources/loading-and-error-states.md:51-63 resources/loading-and-error-states.md:63-78 resources/loading-and-error-states.md:78-82 resources/loading-and-error-states.md:82-86 resources/loading-and-error-states.md:86-90 resources/loading-and-error-states.md:90-94 resources/loading-and-error-states.md:94-116 resources/loading-and-error-states.md:116-122 resources/loading-and-error-states.md:122-140 resources/loading-and-error-states.md:140-149 resources/loading-and-error-states.md:149-163 resources/loading-and-error-states.md:163-171 resources/loading-and-error-states.md:171-177 resources/loading-and-error-states.md:177-194 resources/loading-and-error-states.md:194-209 resources/loading-and-error-states.md:209-226 resources/loading-and-error-states.md:226-229 resources/loading-and-error-states.md:229-230 resources/loading-and-error-states.md:230-231 resources/loading-and-error-states.md:231-232 resources/loading-and-error-states.md:232-236 resources/loading-and-error-states.md:236-256 resources/loading-and-error-states.md:256-260 resources/loading-and-error-states.md:260-287 resources/loading-and-error-states.md:287-295 resources/loading-and-error-states.md:295-330 resources/loading-and-error-states.md:330-334 resources/loading-and-error-states.md:334-356 resources/loading-and-error-states.md:356-360 resources/loading-and-error-states.md:360-398 resources/loading-and-error-states.md:398-406 resources/loading-and-error-states.md:406-428 resources/loading-and-error-states.md:428-432 resources/loading-and-error-states.md:432-447 resources/loading-and-error-states.md:447-455 resources/loading-and-error-states.md:455-479 resources/performance.md:11-32 resources/performance.md:32-51 resources/performance.md:51-62 resources/performance.md:62-66 resources/performance.md:66-78 resources/performance.md:78-88 resources/performance.md:88-96 resources/performance.md:96-111 resources/performance.md:111-131 resources/performance.md:131-157 resources/performance.md:157-170 resources/performance.md:170-200 resources/performance.md:200-204 resources/performance.md:204-216 resources/performance.md:216-220 resources/performance.md:220-237 resources/performance.md:237-247 resources/performance.md:247-274 resources/performance.md:274-282 resources/performance.md:282-296 resources/performance.md:296-300 resources/performance.md:300-326 resources/performance.md:326-334 resources/performance.md:334-342 resources/performance.md:342-346 resources/performance.md:346-362 resources/performance.md:362-370 resources/performance.md:370-386 resources/performance.md:386-393 resources/performance.md:393-394 resources/performance.md:394-395 resources/routing-guide.md:21-32 resources/routing-guide.md:32-35 resources/routing-guide.md:35-36 resources/routing-guide.md:36-45 resources/routing-guide.md:45-79 resources/routing-guide.md:79-83 resources/routing-guide.md:83-84 resources/routing-guide.md:84-94 resources/routing-guide.md:94-103 resources/routing-guide.md:103-107 resources/routing-guide.md:107-112 resources/routing-guide.md:112-127 resources/routing-guide.md:127-135 resources/routing-guide.md:135-139 resources/routing-guide.md:139-146 resources/routing-guide.md:146-152 resources/routing-guide.md:152-161 resources/routing-guide.md:161-165 resources/routing-guide.md:165-180 resources/routing-guide.md:180-188 resources/routing-guide.md:188-200 resources/routing-guide.md:200-204 resources/routing-guide.md:204-216 resources/routing-guide.md:216-224 resources/routing-guide.md:224-236 resources/routing-guide.md:236-240 resources/routing-guide.md:240-247 resources/routing-guide.md:247-251 resources/routing-guide.md:251-258 resources/routing-guide.md:258-266 resources/routing-guide.md:266-285 resources/routing-guide.md:285-289 resources/routing-guide.md:289-305 resources/routing-guide.md:305-311 resources/routing-guide.md:311-346 resources/routing-guide.md:346-353 resources/routing-guide.md:353-354 resources/routing-guide.md:354-355 resources/routing-guide.md:355-356 resources/routing-guide.md:356-357 resources/routing-guide.md:357-358 resources/routing-guide.md:358-359 resources/styling-guide.md:13-39 resources/styling-guide.md:39-41 resources/styling-guide.md:41-43 resources/styling-guide.md:43-59 resources/styling-guide.md:59-65 resources/styling-guide.md:65-79 resources/styling-guide.md:79-89 resources/styling-guide.md:89-93 resources/styling-guide.md:93-97 resources/styling-guide.md:97-108 resources/styling-guide.md:108-112 resources/styling-guide.md:112-122 resources/styling-guide.md:122-126 resources/styling-guide.md:126-143 resources/styling-guide.md:143-151 resources/styling-guide.md:151-170 resources/styling-guide.md:170-172 resources/styling-guide.md:172 resources/styling-guide.md:172-176 resources/styling-guide.md:176-182 resources/styling-guide.md:182-186 resources/styling-guide.md:186-203 resources/styling-guide.md:203-211 resources/styling-guide.md:211-227 resources/styling-guide.md:227-231 resources/styling-guide.md:231-245 resources/styling-guide.md:245-253 resources/styling-guide.md:253-262 resources/styling-guide.md:262-268 resources/styling-guide.md:268-275 resources/styling-guide.md:275-281 resources/styling-guide.md:281-291 resources/styling-guide.md:291-301 resources/styling-guide.md:301-309 resources/styling-guide.md:309-315 resources/styling-guide.md:315-323 resources/styling-guide.md:323-329 resources/styling-guide.md:329-346 resources/styling-guide.md:346-354 resources/styling-guide.md:354-373 resources/styling-guide.md:373-377 resources/styling-guide.md:377-390 resources/styling-guide.md:390-394 resources/styling-guide.md:394-410 resources/styling-guide.md:410-417 resources/styling-guide.md:417-418 resources/styling-guide.md:418-420 resources/typescript-standards.md:13-22 resources/typescript-standards.md:22-25 resources/typescript-standards.md:25-31 resources/typescript-standards.md:31-35 resources/typescript-standards.md:35-56 resources/typescript-standards.md:56-59 resources/typescript-standards.md:59-69 resources/typescript-standards.md:69-72 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 resources/typescript-standards.md:83-87 resources/typescript-standards.md:87-100 resources/typescript-standards.md:100-108 resources/typescript-standards.md:108-116 resources/typescript-standards.md:116-130 resources/typescript-standards.md:130-156 resources/typescript-standards.md:156-161 resources/typescript-standards.md:161-166 resources/typescript-standards.md:166-181 resources/typescript-standards.md:181-189 resources/typescript-standards.md:189-196 resources/typescript-standards.md:196-200 resources/typescript-standards.md:200-210 resources/typescript-standards.md:210-214 resources/typescript-standards.md:214-224 resources/typescript-standards.md:224-228 resources/typescript-standards.md:228-231 resources/typescript-standards.md:231-235 resources/typescript-standards.md:235-249 resources/typescript-standards.md:249-257 resources/typescript-standards.md:257-271 resources/typescript-standards.md:271-275 resources/typescript-standards.md:275-294 resources/typescript-standards.md:294-302 resources/typescript-standards.md:302-310 resources/typescript-standards.md:310-314 resources/typescript-standards.md:314-335 resources/typescript-standards.md:335-343 resources/typescript-standards.md:343-351 resources/typescript-standards.md:351-355 resources/typescript-standards.md:355-361 resources/typescript-standards.md:361-369 resources/typescript-standards.md:369-375 resources/typescript-standards.md:375-379 resources/typescript-standards.md:379-385 resources/typescript-standards.md:385-389 resources/typescript-standards.md:389-399 resources/typescript-standards.md:399-407 resources/typescript-standards.md:407 resources/typescript-standards.md:407-409 SKILL.md:44 SKILL.md:47 SKILL.md:48 SKILL.md:55 SKILL.md:59 SKILL.md:67-76 SKILL.md:76-80 SKILL.md:80-91 SKILL.md:91-95 SKILL.md:95-120 SKILL.md:120-124 SKILL.md:124-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-164 SKILL.md:164-193 SKILL.md:193-197 SKILL.md:197-217 SKILL.md:217-223 SKILL.md:223-258 SKILL.md:258-285 SKILL.md:285-333 SKILL.md:333-341 SKILL.md:341-350 SKILL.md:350-353 SKILL.md:353-357 SKILL.md:357-362 SKILL.md:362-366 SKILL.md:366-384 SKILL.md:384-388 SKILL.md:388-402
⚡ Contém scripts (19)
resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354
📁 Acesso ao sistema de arquivos (33)
resources/complete-examples.md:20 resources/complete-examples.md:188 resources/complete-examples.md:221 resources/complete-examples.md:222 resources/complete-examples.md:338 resources/complete-examples.md:392 resources/complete-examples.md:548 resources/complete-examples.md:549 resources/complete-examples.md:753 resources/complete-examples.md:754 resources/complete-examples.md:755 resources/complete-examples.md:816 resources/component-patterns.md:199 resources/data-fetching.md:24 resources/data-fetching.md:70 resources/data-fetching.md:219 resources/data-fetching.md:308 resources/data-fetching.md:513 resources/data-fetching.md:544 resources/data-fetching.md:545 resources/data-fetching.md:631 resources/file-organization.md:237 resources/file-organization.md:237 resources/file-organization.md:237 resources/file-organization.md:238 resources/file-organization.md:238 resources/file-organization.md:238 resources/file-organization.md:395 resources/file-organization.md:396 resources/loading-and-error-states.md:300 resources/loading-and-error-states.md:339 resources/loading-and-error-states.md:365 skill-report.json:6
Auditado por: claude Ver Histórico de Auditoria →
Pontuação de qualidade
38
Arquitetura
100
Manutenibilidade
85
Conteúdo
20
Comunidade
100
Segurança
91
Conformidade com especificações
O Que Você Pode Construir
构建 Next.js 应用程序
获取关于使用 App Router、服务器组件和现代 React 模式构建 Next.js 应用程序的指导。
学习组件模式
了解何时使用客户端组件与服务器组件，以及如何使用 Suspense 实现懒加载。
集成 Supabase
学习服务器端和客户端的 Supabase 集成模式，用于身份验证和数据获取。
Tente Estes Prompts
组件基础
展示如何在 Next.js App Router 中使用 shadcn/ui 和 Tailwind CSS 创建新的服务器组件
数据获取
如何在服务器组件中从 Supabase 获取数据并处理加载状态？
表单验证
使用 shadcn/ui 组件创建带有 React Hook Form 和 Zod 验证的登录表单
性能优化
如何使用 React.lazy 和 Suspense 懒加载重型 DataGrid 组件？
Melhores Práticas
- 从服务器组件开始，仅在需要 React hooks 或事件处理程序时才添加 'use client'
- 使用带有 Tailwind CSS 的 shadcn/ui 组件实现一致、可访问的 UI
- 为每个路由段实现 loading.tsx 和 error.tsx 文件
Evitar
- 避免为每个组件都添加 'use client' - 这会破坏服务器渲染的优势
- 当 Tailwind CSS 可用时不要使用内联样式
- 避免在客户端组件中进行直接数据库查询 - 应使用服务器组件或服务器操作
Perguntas Frequentes
推荐的文件夹结构是什么？
使用 app/ 作为 Next.js 页面，components/ui 作为 shadcn 组件，lib/ 用于 Supabase 客户端等工具函数。
如何处理身份验证？
将 Supabase auth 与 createServerClient 配合用于服务器组件，createClient 用于客户端组件。
何时应该使用 TanStack Query？
在客户端使用 TanStack Query 进行缓存、乐观更新和复杂数据同步场景。
如何优化性能？
使用 React.lazy 懒加载重型组件，使用 Suspense 边界，并优先使用服务器组件进行数据获取。
可以和 Vue 或 Angular 一起使用吗？
调整原则 - 组件组合、类型安全和性能优化适用于任何框架。
这适用于 Pages Router 吗？
本指南专注于 App Router 模式。Pages Router 使用不同的数据获取和布局约定。