技能 frontend-dev-guidelines
📦
frontend-dev-guidelines
内容修订 r2 安全 ⚡ 包含脚本⚙️ 外部命令📁 文件系统访问🌐 网络访问
使用清晰模式构建 React 前端
前端团队经常把时间耗在争论 React 模式和文件布局上。此技能为 Claude、Codex 和 Claude Code 提供清晰指南，帮助实现一致的 React TypeScript 开发。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/briandai22-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/briandai22-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 服务、Suspense hooks、懒加载仪表板区块、MUI 布局和 snackbar 错误处理分离开的计划。
正在使用“frontend-dev-guidelines”。 按照项目约定审查一个 React 功能。
预期结果:
一份简明审查，涵盖功能文件夹、导入别名、路由设置、Suspense 边界、MUI v7 Grid 语法和 TypeScript 问题。
正在使用“frontend-dev-guidelines”。 重构旧版加载 spinner 模式。
预期结果:
一条从早期 loading returns 迁移到 SuspenseLoader 或 LoadingOverlay 的路径，同时保持布局稳定。
安全审计
安全v9 • 2026/7/23 打开版本化报告
All 187 static alerts are false positives from Markdown and illustrative React or TypeScript snippets. The skill contains no executable scripts or prompt injection evidence. Dynamic imports, relative imports, and API calls are conventional frontend examples with fixed targets.
11
已扫描文件
5,490
分析行数
0
复核项
0
已忽略误报
风险因素
⚡ 包含脚本 (22)
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 SKILL.md:32 SKILL.md:75 SKILL.md:193
⚙️ 外部命令 (50)
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:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:37 SKILL.md:40 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:72-96 SKILL.md:96-105 SKILL.md:105-106 SKILL.md:106-107 SKILL.md:107-125 SKILL.md:125-129 SKILL.md:129-130 SKILL.md:130-132 SKILL.md:132 SKILL.md:141-142 SKILL.md:142-145 SKILL.md:145-153 SKILL.md:153-162 SKILL.md:162-163 SKILL.md:163-166 SKILL.md:166-167 SKILL.md:167-168 SKILL.md:168-171 SKILL.md:171-174 SKILL.md:174-183
📁 文件系统访问 (30)
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.md:66 SKILL.md:355
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/briandai22-frontend-dev-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/briandai22-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/briandai22-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/briandai22-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 引用
BrianDai22. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9BibTeX 引用
@techreport{briandai22-briandai22-frontend-dev-guidelines-2026,
author = {BrianDai22},
title = {frontend-dev-guidelines security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/briandai22-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: "BrianDai22"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9"
identifiers:
- type: other
value: "skillstore:briandai22-frontend-dev-guidelines:audit:9"
description: "Skillstore immutable audit report identifier"
比较变体
7 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
作者 / 来源 Skillstore 评分 证据置信度 Skillstore 使用量 已更新
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
内容
78
社区
83
规范符合性
你能构建什么
创建新功能
使用功能结构、API 服务、路由和组件模式来构建一致的 React 功能。
标准化代码审查
根据 Suspense、导入、MUI 样式和 TypeScript 安全性的共享规则来评估 pull requests。
指导 AI 编码会话
在生成或编辑代码之前，为 Claude、Codex 或 Claude Code 提供项目特定的前端约定。
试试这些提示
创建组件
使用 frontend-dev-guidelines 为 [feature] 创建 React TypeScript 组件。遵循组件清单、SuspenseLoader 模式和 MUI v7 sx 样式。
添加数据获取
使用数据获取指南为 [entity] 设计 useSuspenseQuery hook。包含 query keys、缓存优先行为、mutation 处理和面向用户的错误。
重构功能
根据文件组织、路由、样式、性能和 TypeScript 标准审查 [feature path]。建议范围明确的更改，并实现安全的更改。
构建完整工作流
使用所有 frontend-dev-guidelines 资源来构建 [workflow]。包含功能文件夹、API 服务、路由、懒加载、Suspense 边界、MUI 样式和聚焦测试。
最佳实践
- 为新的数据驱动组件使用 SuspenseLoader 和 useSuspenseQuery。
- 将领域代码保存在功能文件夹中，并且只暴露公共功能 API。
- 优先使用类型化的 MUI sx 样式、导入别名和显式 TypeScript 返回类型。
避免
- 不要使用会替换整个布局的早期 loading returns。
- 不要在功能 API 服务层之外创建分散的 API 调用。
- 不要在新代码中混用旧版 MUI Grid props、深层导入和宽泛的 any 类型。
常见问题
哪些项目最适合此技能？
它适用于使用 MUI v7、TanStack Query 和 TanStack Router 的 React TypeScript 项目。
它能直接编写代码吗？
该技能提供约定和示例。助手仍会使用会话中可用的工具来编辑代码。
它是否要求每个数据请求都使用 Suspense？
它建议新组件使用 useSuspenseQuery，并允许在旧版或特殊场景中使用常规 useQuery。
它包含后端 API 指导吗？
不。它专注于前端服务封装、路由字符串、query keys 和客户端数据流。
Claude Code 和 Codex 都能使用它吗？
是。报告标明支持 Claude、Codex 和 Claude Code。
团队应该首先自定义什么？
团队应先将功能名称、路由格式、测试预期和本地 API 客户端行为与其代码库保持一致。
开发者详情
作者
BrianDai22许可证
MIT
Skillstore 修订
r2
版本提示
作者未声明版本。
引用
a39a91716eadede5f4cdefd78178fed4e837a128
维护新鲜度
2026/7/24
使用量
9 次下载 · 706 次浏览