📦
skill-creator
78创建更好的 Claude 技能
技能作者需要一个可重复的流程，将工作流转化为有用的 AI 技能。此技能为示例、资源规划、元数据、打包和迭代提供清晰步骤。
文档 查看
技能 frontend-dev-guidelines
📦
frontend-dev-guidelines
内容修订 r2 安全 ⚡ 包含脚本⚙️ 外部命令📁 文件系统访问🌐 网络访问
构建一致的 React 前端
当前端团队在路由、数据获取、加载和样式方面的应用模式不一致时，会浪费大量时间。此技能为 Next.js、React、TypeScript、shadcn/ui、MUI 和 TanStack Query 提供简明指南。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/bom-98-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/bom-98-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”。 规划一个包含筛选器、表格和编辑操作的帖子仪表板页面。
预期结果:
- 使用包含 API、hooks、components、types 和 helpers 的功能文件夹。
- 在 Suspense 边界内渲染表格，并对较重的 grid 进行懒加载。
- 为列表、详情记录和 mutations 使用 TanStack Query keys。
- 添加能够保留页面布局的加载和错误边界。
正在使用“frontend-dev-guidelines”。 审查一个资料编辑器的加载和错误行为。
预期结果:
- 避免使用会替换页面结构的早期加载返回。
- 当数据可以独立加载时，将独立区域包装在 SuspenseLoader 中。
- 使用 mutation 成功和错误处理器进行缓存失效和用户反馈。
正在使用“frontend-dev-guidelines”。 组织一个需要列表、详情和编辑视图的新功能。
预期结果:
- 创建一个功能目录，其中包含 API 服务、路由组件、可复用子组件、hooks 和共享 types。
- 仅当通用 UI 组件会在多个区域复用时，才将其放在功能目录之外。
- 通过功能 index 文件记录公共导出。
安全审计
安全v9 • 2026/7/23 打开版本化报告
All 151 static findings are false positives in instructional Markdown and TypeScript examples. Dynamic imports use fixed paths, backticks are documentation syntax, and relative imports do not access the filesystem. Network examples use application clients or a same-origin endpoint, and no prompt injection or malicious intent was found.
11
已扫描文件
5,553
分析行数
0
复核项
0
已忽略误报
风险因素
⚡ 包含脚本 (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
⚙️ 外部命令 (44)
resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 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:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 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
📁 文件系统访问 (28)
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: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 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/bom-98-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/bom-98-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 引用
BOM-98. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9BibTeX 引用
@techreport{bom-98-bom-98-frontend-dev-guidelines-2026,
author = {BOM-98},
title = {frontend-dev-guidelines security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9},
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 9)"
version: "unspecified"
type: report
authors:
- name: "BOM-98"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9"
identifiers:
- type: other
value: "skillstore:bom-98-frontend-dev-guidelines:audit:9"
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-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
内容
77
社区
83
规范符合性
你能构建什么
标准化新功能
在构建功能之前，规划路由、组件边界、API 服务、hooks、加载状态和样式。
审查前端架构
检查 pull request 是否遵循 Suspense、数据获取、TypeScript 和文件布局的共享模式。
熟悉 React 代码库
了解组件、样式、路由、缓存行为和错误处理的预期约定。
试试这些提示
规划页面
使用 frontend-dev-guidelines 为 [route] 规划一个新页面。包括组件类型、数据获取、加载状态、错误状态和样式选择。
设计组件
使用 frontend-dev-guidelines 设计一个可复用的 [component]。定义 props、状态边界、UI 库用法、可访问性需求和文件位置。
重构数据获取
使用 frontend-dev-guidelines 将 [screen] 重构为使用 TanStack Query 和 Suspense。包括缓存 keys、失效策略、加载行为和错误处理。
审计功能架构
使用 frontend-dev-guidelines 审查 [feature folder]。识别路由、组件、API 服务、hooks、TypeScript、样式和性能模式中的偏差。
最佳实践
- 除非交互性需要客户端状态，否则使用 Server Components 或基于 Suspense 的数据流。
- 按 API 服务、hooks、components、helpers 和共享 types 组织功能代码。
- 在标记前端工作完成之前，添加加载、错误、TypeScript、样式和性能检查。
避免
- 当服务端渲染或 Suspense 可以处理工作流时，不要添加仅客户端组件。
- 当存在功能服务层时，不要将 API 调用分散到各个组件中。
- 不要使用会导致布局偏移或隐藏页面结构的早期加载返回。
常见问题
哪些项目最适合使用此技能？
它适合使用现代路由、组件、数据获取和 UI 模式的 React 与 TypeScript 前端项目。
它会生成可运行的应用程序代码吗？
它提供模式和示例，AI assistant 可以在编写或审查项目代码时应用这些内容。
它可以与 Claude、Codex 和 Claude Code 一起使用吗？
可以。报告标明支持 Claude、Codex 和 Claude Code 工作流。
它是否要求使用 Next.js？
不需要。Next.js 模式是核心，但多个资源也涵盖 TanStack Router 和通用 React 架构。
它包含安全指导吗？
仅包含有限的前端安全指导。对于身份验证、授权和数据暴露，请使用单独的安全审查。
团队在代码审查期间应如何使用它？
让 assistant 将变更文件与数据获取、加载、文件布局、TypeScript 和样式方面记录的模式进行比较。
开发者详情
作者
BOM-98许可证
MIT
Skillstore 修订
r2
版本提示
作者未声明版本。
引用
a39a91716eadede5f4cdefd78178fed4e837a128
维护新鲜度
2026/7/24
使用量
9 次下载 · 670 次浏览
BOM-98 的更多技能
查看全部相关技能
查看全部📦
senior-frontend
81构建可用于生产的前端功能
由 davila7
前端团队需要在各项目中获得一致的 React 和 Next.js 指导。此技能提供用于前端分析的参考工作流、质量实践和辅助脚本。
编码与开发 查看
📦
vercel-react-view-transitions
82实现 React View Transitions
由 vercel-labs
React 视图过渡很容易放错位置，从而导致无提示或嘈杂的动画。此技能可指导路由、Suspense、列表和共享元素动画的选择。
编码与开发 查看
📦
vercel-react-best-practices
80优化 React 和 Next.js 性能
由 vercel-labs
React 和 Next.js 应用常常会因为瀑布式请求、大型包体以及可避免的重复渲染而变慢。此技能为代理提供具体规则，以便更安全地进行以性能为重点的改动。
编码与开发 查看
📦
senior-fullstack
82在资深指导下构建全栈应用
由 alirezarezvani
全栈项目通常需要一致的设置、架构选择和质量检查。此技能为 React、Next.js、Node.js、GraphQL 和 PostgreSQL 工作提供脚本与参考资料。
编码与开发 查看
📦
react-dev
82构建类型安全的 React 组件
由 softaworks
React TypeScript 工作通常需要精确的事件、hook 和路由类型。此技能提供针对类型化组件、React 19 API 和路由的聚焦模式。
编码与开发 查看
📦
vue-options-api-best-practices
81改进 Vue Options API 组件
由 vuejs-ai
Vue Options API 项目可能会失去类型安全性和正确的 this 绑定。此技能提供更安全 Vue 组件的直接模式。
编码与开发 查看