技能 pitfalls-react
📦

pitfalls-react

内容修订 r1 安全 ⚙️ 外部命令

构建更安全的 React 界面

React UI 工作可能会遗漏加载状态、验证、响应式布局和无障碍细节。此技能通过简洁的 React 模式和检查清单来指导组件审查。

支持: Claude Codex Code(CC)
🥉 78 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "pitfalls-react" from https://skillstore.io/skills/barissozen-pitfalls-react.md and its manifest at https://skillstore.io/api/skills/barissozen-pitfalls-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/barissozen-pitfalls-react.md 已签名 manifest GET /api/skills/barissozen-pitfalls-react/manifest 已签名 lockfile GET /api/skills/barissozen-pitfalls-react/lockfile

测试它

正在使用“pitfalls-react”。 一个 React 组件立即渲染数据，并使用可点击的通用容器。

预期结果:

审查会标记缺失的加载和错误状态，建议使用语义化按钮行为，并要求提供键盘支持和焦点样式。

正在使用“pitfalls-react”。 一个表单接受值，但只在提交后显示验证。

预期结果:

审查会建议使用 schema 验证、内联字段错误，以及在验证或提交处于活动状态时禁用提交状态。

正在使用“pitfalls-react”。 一个仪表板表格在桌面端可用，但在小屏幕上会溢出。

预期结果:

审查会建议采用移动优先布局、表格横向滚动，以及适合触控的控件尺寸。

安全审计

安全
v8 • 2026/7/6 打开版本化报告

All static findings were false positives caused by Markdown code fences, React keyboard-event examples, CSS focus styles, or documentation checklist text. I found no prompt injection, malicious intent, command execution, credential handling, or system reconnaissance behavior in SKILL.md.

1
已扫描文件
167
分析行数
0
复核项
0
已忽略误报

风险因素

⚙️ 外部命令 (9)
SKILL.md:37-64 SKILL.md:64-68 SKILL.md:68-99 SKILL.md:99-103 SKILL.md:103-121 SKILL.md:121-125 SKILL.md:125-138 SKILL.md:138-142 SKILL.md:142-156
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/barissozen-pitfalls-react/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/barissozen-pitfalls-react/security.svg)](https://skillstore.io/skills/barissozen-pitfalls-react?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/barissozen-pitfalls-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/barissozen-pitfalls-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/barissozen-pitfalls-react.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 引用

BarisSozen. (2026). pitfalls-react security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barissozen-pitfalls-react/audits/8

BibTeX 引用

@techreport{barissozen-barissozen-pitfalls-react-2026, author = {BarisSozen}, title = {pitfalls-react security audit report (audit version 8)}, institution = {Skillstore}, year = {2026}, number = {8}, url = {https://skillstore.io/skills/barissozen-pitfalls-react/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: "pitfalls-react security audit report (audit version 8)" version: "unspecified" type: report authors: - name: "BarisSozen" date-released: "2026-07-06" url: "https://skillstore.io/skills/barissozen-pitfalls-react/audits/8" identifiers: - type: other value: "skillstore:barissozen-pitfalls-react:audit:8" description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据 证据置信度: 高
55
架构
85
可维护性
87
内容
70
社区
83
规范符合性

你能构建什么

审查新组件

在合并前发现缺失的加载状态、错误状态、辅助信息位置问题和导航隐患。

改进表单行为

检查 React 表单的验证 schema、内联错误显示和禁用提交状态。

准备无障碍检查

审查语义化 HTML、ARIA 标签、键盘行为、焦点指示器和触控目标尺寸。

试试这些提示

审查组件 
使用 pitfalls-react skill 审查此 React 组件的加载状态、错误状态和辅助信息位置：[paste component].
改进表单 
使用 pitfalls-react skill 检查此表单的 Zod schema 覆盖范围、内联错误和提交状态处理：[paste form].
审计无障碍 
使用 pitfalls-react skill 审查此 UI 的语义化 HTML、ARIA 标签、键盘支持和焦点指示器：[paste code].
运行完整 React 隐患审查 
使用 pitfalls-react skill 审计此功能的组件模式、表单验证、响应式行为、错误边界和无障碍：[paste files].

最佳实践

  • 在合并添加表单、导航或异步数据的 React UI 更改前使用此技能。
  • 提供完整的组件上下文，包括加载、错误和空状态行为。
  • 将检查清单与测试、linting 和手动无障碍检查配合使用。

避免

  • 不要将示例视为完整的应用架构。
  • 不要在应用指导后跳过浏览器和键盘测试。
  • 当有可用的语义化元素时，不要使用通用容器作为交互控件。

常见问题

此技能审查什么？
它审查 React 组件、表单、错误边界、响应式布局和无障碍基础。
它会执行项目命令吗？
不会。该技能提供书面指导和示例，但不会运行命令。
它可以替代自动化测试吗？
不能。请将它与单元测试、集成测试、类型检查和 linting 一起使用。
它对 React Hook Form 有用吗？
有用。它包含 React Hook Form、Zod schemas、内联错误和提交状态的指导。
它覆盖无障碍吗？
覆盖。它涵盖语义化 HTML、ARIA 标签、键盘导航、焦点指示器和触控目标。
哪些工具可以使用它？
报告列出了对 Claude、Codex 和 Claude Code 的支持。

开发者详情

作者

BarisSozen

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/BarisSozen/claude/tree/main/.claude/skills/pitfalls-react

引用

c4231f0153ccd2a2ed62274c5a372bf8f2386d3f

维护新鲜度

2026/7/26

使用量

7 次下载 · 196 次浏览

文件结构

📄 SKILL.md

BarisSozen 的更多技能

查看全部

相关技能

查看全部