技能 frontend-dev-guidelines
📦
frontend-dev-guidelines
内容修订 r2 安全 ⚡ 包含脚本⚙️ 外部命令📁 文件系统访问🌐 网络访问
构建一致的 React 前端
前端团队在数据获取、路由、样式和 TypeScript 模式上经常逐渐不一致。此技能为 Claude、Codex 和 Claude Code 提供具体的 React 指南，用于可预测的实现和审查。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/sickn33-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/sickn33-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 query hooks、组件边界和 MUI 布局选择。
正在使用“frontend-dev-guidelines”。 请求审查一个前端 pull request。
预期结果:
- 标记应移到 Suspense boundaries 后面的早期加载返回。
- 指出缺少显式 TypeScript 返回类型和不安全的导入路径。
- 建议对较重的 grids 和 dialogs 使用懒加载。
正在使用“frontend-dev-guidelines”。 询问如何组织新的 analytics 功能。
预期结果:
一份基于功能的概要，包含 API、components、hooks、helpers、types、public exports 和路由集成指南。
安全审计
安全v5 • 2026/7/23 打开版本化报告
All 173 static findings are false positives caused by Markdown syntax and illustrative React or TypeScript code. The skill contains no executable scripts, shell commands, arbitrary file access, exfiltration endpoints, or prompt-injection instructions. No semantic security finding was identified.
11
已扫描文件
5,461
分析行数
0
复核项
0
已忽略误报
风险因素
⚡ 包含脚本 (20)
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:158
⚙️ 外部命令 (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:43-45 SKILL.md:45-47 SKILL.md:47-64 SKILL.md:64-65 SKILL.md:65-77 SKILL.md:77-78 SKILL.md:78-83 SKILL.md:83-85 SKILL.md:85-107 SKILL.md:107-109 SKILL.md:109-110 SKILL.md:110-112 SKILL.md:112-115 SKILL.md:115-121 SKILL.md:121-122 SKILL.md:122 SKILL.md:123-124 SKILL.md:124-127 SKILL.md:127-135 SKILL.md:135 SKILL.md:136 SKILL.md:137 SKILL.md:138 SKILL.md:150-151 SKILL.md:151-157 SKILL.md:157-159 SKILL.md:159-161 SKILL.md:161-169 SKILL.md:169-175 SKILL.md:175-184 SKILL.md:184-194 SKILL.md:194-199 SKILL.md:199-207 SKILL.md:207 SKILL.md:208 SKILL.md:212-215 SKILL.md:215-230
📁 文件系统访问 (29)
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:287
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-frontend-dev-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-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 引用
sickn33. (2026). frontend-dev-guidelines security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5BibTeX 引用
@techreport{sickn33-sickn33-frontend-dev-guidelines-2026,
author = {sickn33},
title = {frontend-dev-guidelines security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5},
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 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-dev-guidelines:audit:5"
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
sickn33 当前
sickn33-frontend-dev-guidelines
Skillstore 评分 78
证据置信度 高
Skillstore 使用量 12
已更新
2026-09-09
dojocodinglabs-frontend-dev-guidelines
Skillstore 评分 78
证据置信度 高
Skillstore 使用量 12
已更新
2026-09-09
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
70
社区
83
规范符合性
你能构建什么
标准化 React 功能
使用该指南以一致方式组织功能文件夹、API 服务、queries、组件和路由文件。
审查前端 Pull Requests
在批准前，根据 Suspense、TypeScript、MUI、性能和数据获取标准对变更进行比较。
规划前端迁移
创建共享规则，推动 React 代码库向更严格的类型和可预测的功能边界迁移。
试试这些提示
创建组件
使用 frontend-dev-guidelines 为此需求构建一个带类型的 React 组件。遵循所要求的结构、Suspense 规则和 MUI v7 样式模式。
添加功能
使用 frontend-dev-guidelines 规划并实现一个新功能。包括文件夹结构、API 服务边界、query hooks、路由放置位置和组件职责。
审查现有代码
使用 frontend-dev-guidelines 审查此前端变更。识别 TypeScript、imports、Suspense boundaries、数据获取、MUI 使用和性能默认设置方面的问题。
重构架构
使用 frontend-dev-guidelines 将此 React 区域重构为基于功能的架构。在保留行为的同时改进边界、懒加载、query 使用和可维护性。
最佳实践
- 在编写代码前应用该指南，使架构决策明确化。
- 当现有代码无法遵循标准时，记录项目特定的例外情况。
- 将该技能与测试、linting、可访问性检查和运行时验证配合使用。
避免
- 不要将这些规则强加到使用不同前端框架的项目上。
- 不要把示例代码视为完整的生产实现。
- 不要因为结构看起来正确就跳过产品、可访问性和安全审查。
常见问题
此技能面向哪些框架？
它面向使用 TypeScript、MUI v7、TanStack Query 和 TanStack Router 的 React 应用。
它能帮助现有代码库吗？
可以。它可以指导审查和重构，但团队应逐步应用变更。
它会生成可运行的前端代码吗？
它可以指导代码生成，但不会执行、测试或部署代码。
每次数据获取都必须使用 Suspense 吗？
该技能强烈建议新组件使用 Suspense，并将旧模式视为例外。
它涵盖样式决策吗？
是的。它包括 MUI v7 Grid 语法、sx 使用方式，以及独立样式文件的指南。
Claude Code 或 Codex 可以用它进行审查吗？
可以。该指南兼容 Claude、Codex 和 Claude Code 工作流。
开发者详情
作者
sickn33许可证
MIT
Skillstore 修订
r2
版本提示
作者未声明版本。
引用
88a8e9a07f4c54ab105c1c41b6267c287146b07b
维护新鲜度
2026/7/26
使用量
7 次下载 · 172 次浏览