技能 frontend-dev-guidelines
📦
frontend-dev-guidelines
内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
使用现代模式构建 Next.js 前端
现代 Next.js 项目需要在组件、路由、数据获取和样式方面保持一致的模式。此技能为 Claude、Codex 和 Claude Code 提供面向 React 19 和 Next.js 15 的实用前端指导。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/0chan-smc-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-dev-guidelines”。 创建一个包含加载和错误状态的产品列表路由。
预期结果:
该技能会推荐 App Router 页面、loading 文件、错误边界、功能组件和 Server Component 数据获取。
正在使用“frontend-dev-guidelines”。 审查这个交互式表单组件计划。
预期结果:
该技能会检查 Client Component 要求、类型化 props、验证、Server Actions、Shadcn/ui 用法和 Tailwind 类组织。
正在使用“frontend-dev-guidelines”。 提升 dashboard 页面的性能。
预期结果:
该技能会建议使用 Server Components、Suspense 边界、优化图片、字体处理，以及谨慎使用客户端 hooks。
安全审计
安全v8 • 2026/7/6 打开版本化报告
All static findings are false positives caused by Markdown formatting, placeholder example code, or JSX snippets. No prompt injection, malicious intent, credential access, command execution, or real network behavior was found in SKILL.md.
1
已扫描文件
653
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (81)
SKILL.md:32 SKILL.md:34 SKILL.md:36 SKILL.md:37 SKILL.md:45 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:59 SKILL.md:60 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:65 SKILL.md:71-94 SKILL.md:94-104 SKILL.md:104-105 SKILL.md:105-116 SKILL.md:116-138 SKILL.md:138-142 SKILL.md:142-160 SKILL.md:160-169 SKILL.md:169-170 SKILL.md:170-176 SKILL.md:176-177 SKILL.md:177-181 SKILL.md:181-197 SKILL.md:197-201 SKILL.md:201-210 SKILL.md:210-218 SKILL.md:218-236 SKILL.md:236-240 SKILL.md:240-241 SKILL.md:241-242 SKILL.md:242-251 SKILL.md:251-253 SKILL.md:253-257 SKILL.md:257-279 SKILL.md:279-283 SKILL.md:283-285 SKILL.md:285-293 SKILL.md:293-294 SKILL.md:294-295 SKILL.md:295-296 SKILL.md:296-300 SKILL.md:300-320 SKILL.md:320-324 SKILL.md:324-340 SKILL.md:340-348 SKILL.md:348-354 SKILL.md:354-360 SKILL.md:360-369 SKILL.md:369-373 SKILL.md:373-398 SKILL.md:398-407 SKILL.md:407-408 SKILL.md:408-410 SKILL.md:410 SKILL.md:415-429 SKILL.md:429-433 SKILL.md:433-447 SKILL.md:447-456 SKILL.md:456-458 SKILL.md:458-463 SKILL.md:463-485 SKILL.md:485-494 SKILL.md:494 SKILL.md:499-520 SKILL.md:520-524 SKILL.md:524-535 SKILL.md:535-542 SKILL.md:542-544 SKILL.md:544-545 SKILL.md:545-547 SKILL.md:547 SKILL.md:548-554 SKILL.md:554-580 SKILL.md:580-588 SKILL.md:588-609 SKILL.md:609-613 SKILL.md:613-642
🌐 网络访问 (2)
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/0chan-smc-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/0chan-smc-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
0Chan-smc. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8BibTeX 引用
@techreport{0chan-smc-0chan-smc-frontend-dev-guidelines-2026,
author = {0Chan-smc},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "0Chan-smc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:0chan-smc-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
比较变体
7 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
作者 / 来源 Skillstore 评分 证据置信度 Skillstore 使用量 已更新
BrianDai22 推荐
briandai22-frontend-dev-guidelines
Skillstore 评分 79
证据置信度 高
Skillstore 使用量 16
已更新
2026-09-09
0Chan-smc 当前
0chan-smc-frontend-dev-guidelines
Skillstore 评分 78
证据置信度 高
Skillstore 使用量 195
已更新
2026-10-11
dojocodinglabs-frontend-dev-guidelines
Skillstore 评分 78
证据置信度 高
Skillstore 使用量 12
已更新
2026-09-09
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
83
社区
78
规范符合性
你能构建什么
创建功能页面
规划一个新的 App Router 页面，包含组件、加载 UI、错误处理和数据获取模式。
标准化组件工作
应用一致的 Server Component、Client Component、TypeScript、Shadcn/ui 和 Tailwind CSS 约定。
审查前端架构
检查 Next.js 功能是否遵循现代文件组织、性能和类型实践。
试试这些提示
构建一个简单页面
使用 frontend-dev-guidelines 技能，为包含加载和错误状态的 posts 列表规划一个 Next.js 15 页面。
选择组件边界
使用 frontend-dev-guidelines 技能，决定此功能的哪些部分应作为 Server Components 或 Client Components。
设计数据变更
使用 frontend-dev-guidelines 技能，设计一个包含验证、Server Actions 和 Shadcn/ui 表单组件的表单流程。
审查功能计划
使用 frontend-dev-guidelines 技能，审查我的 Next.js 功能计划，检查路由、文件组织、性能和 TypeScript 问题。
最佳实践
- 从 Server Components 开始，仅在需要交互、hooks 或浏览器 API 时再添加 Client Components。
- 将路由文件、功能组件、Server Actions 和共享 UI 放在清晰的 App Router 位置中。
- 在前端代码中一致使用 TypeScript、Shadcn/ui、Tailwind CSS 和 cn 工具函数。
避免
- 在未检查是否需要浏览器 API 或 hooks 的情况下，为每个组件添加 use client。
- 将路由逻辑、共享 UI、功能代码和数据变更混放在一个无结构的文件夹中。
- 未进行适配就将占位 API URL 或示例数据模型复制到生产环境中。
常见问题
此技能最适合哪些项目？
它最适合使用 React 19、TypeScript、Shadcn/ui、Tailwind CSS 和 App Router 的 Next.js 15 应用。
此技能会执行命令吗？
不会。它是一个带示例的 Markdown 指导技能，不需要 shell 命令或本地执行。
它能帮助选择 Server Components 或 Client Components 吗？
可以。它会解释何时默认使用 Server Components，以及何时由于客户端交互需要 Client Component。
它包含数据获取指导吗？
包含。它涵盖 Server Component 数据获取、Server Actions、缓存说明和变更模式。
它能替代特定项目的审查吗？
不能。它提供通用模式，但团队仍需要根据自身架构、安全性、可访问性和需求进行审查。
它兼容 Claude Code 和 Codex 吗？
兼容。报告列出了对 Claude、Claude Code 和 Codex 的支持。