技能 frontend-patterns
📦
frontend-patterns
v1.0 内容修订 r1 安全 ⚡ 包含脚本⚙️ 外部命令🌐 网络访问
构建更好的 React 前端
前端团队经常在组件、状态和性能决策上重复摸索，缺少共享参考。此技能提供简洁的 React 和 Next.js 模式，用于指导一致的实现方式。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-patterns" from https://skillstore.io/skills/sickn33-frontend-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-patterns”。 我需要一个可复用的仪表板标签页界面。
预期结果:
推荐复合组件模式，定义主要职责，并解释共享状态应如何通过 context 流动。
正在使用“frontend-patterns”。 我的市场列表有数千行，滚动很慢。
预期结果:
建议使用虚拟化、稳定的行高、overscan 和 memoized 条目组件来减少渲染工作。
正在使用“frontend-patterns”。 我需要一个无障碍的模态框模式。
预期结果:
将动画、焦点管理、Escape 处理和 dialog 属性整合为一份简洁的实现检查清单。
安全审计
安全v4 • 2026/7/6 打开版本化报告
Reviewed all 44 static findings in SKILL.md. They are false positives from Markdown code fences, TypeScript template literals, React lazy imports, local fetch examples, key event handling, and callback names. No prompt injection, command execution, credential access, or data exfiltration intent was found.
1
已扫描文件
633
分析行数
0
复核项
0
已忽略误报
风险因素
⚡ 包含脚本 (2)
⚙️ 外部命令 (33)
SKILL.md:16-24 SKILL.md:24-40 SKILL.md:40-44 SKILL.md:44-90 SKILL.md:90-94 SKILL.md:94-124 SKILL.md:124-130 SKILL.md:130-143 SKILL.md:143-147 SKILL.md:147-198 SKILL.md:198-202 SKILL.md:202-226 SKILL.md:226-232 SKILL.md:232-281 SKILL.md:281-287 SKILL.md:287-307 SKILL.md:307-311 SKILL.md:311-331 SKILL.md:331-335 SKILL.md:335-352 SKILL.md:352-364 SKILL.md:364-365 SKILL.md:365-375 SKILL.md:375-381 SKILL.md:381-452 SKILL.md:452-456 SKILL.md:456-500 SKILL.md:500-506 SKILL.md:506-554 SKILL.md:554-560 SKILL.md:560-597 SKILL.md:597-601 SKILL.md:601-631
🌐 网络访问 (2)
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-frontend-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-frontend-patterns?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-frontend-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-patterns.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 引用
affaan-m. (2026). frontend-patterns security audit report (audit version 4) [Author version 1.0]. Skillstore. https://skillstore.io/skills/sickn33-frontend-patterns/audits/4BibTeX 引用
@techreport{affaan-m-sickn33-frontend-patterns-2026,
author = {affaan-m},
title = {frontend-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-frontend-patterns/audits/4},
note = {Author version 1.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-patterns security audit report (audit version 4)"
version: "1.0"
type: report
authors:
- name: "affaan-m"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/sickn33-frontend-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
69
社区
78
规范符合性
你能构建什么
标准化 React 组件
使用组合和复合组件示例，在整个产品中创建可预测的组件 API。
提升界面性能
应用 memoization、lazy loading 和虚拟化模式，减少复杂页面中的缓慢渲染。
审查 UI 无障碍模式
在设计模态框、下拉菜单和交互控件时，使用键盘导航和焦点管理示例。
试试这些提示
查找模式
请从此技能中为 [problem] 展示一个前端模式。说明何时使用它，以及需要检查哪些权衡。
调整组件
使用组合和复合组件模式来设计 [component]。保持 API 简洁，并列出必需的 props。
提升性能
审查这个 React 视图，找出 memoization、lazy loading 和虚拟化机会。使用技能模式提出具体修改建议。
设计前端架构
为 [feature] 创建一个前端计划，使用组件组合、自定义 hooks、context reducers、表单、错误处理、动画和无障碍模式。
最佳实践
- 选择与功能复杂度和团队维护需求相匹配的模式。
- 保持可复用组件 API 小巧、类型明确，并在相似组件之间保持一致。
- 在实现前后结合测量来配套进行性能修改。
避免
- 不要为仅由一个组件拥有的本地状态添加 context 或 reducers。
- 不要在没有明确渲染成本或稳定性需求的情况下 memoize 每个值。
- 不要直接复制示例而不根据最终 UI 调整无障碍行为。
常见问题
此技能会运行前端代码吗？
不会。它提供书面的 React 和 TypeScript 示例，供助手进行调整。
它能帮助 Next.js 项目吗？
可以。这些模式适用于 React 和 Next.js 界面，但不涵盖路由细节。
它包含状态管理指导吗？
包括。它包含用于共享 UI 状态的自定义 hooks、context 和 reducer 示例。
它能提升性能吗？
可以。它提供 memoization、lazy loading 和虚拟化模式。你仍应测量真实应用行为。
它涵盖无障碍吗？
涵盖。它包含面向交互组件的键盘导航和焦点管理示例。
它是完整的设计系统吗？
不是。它是模式参考，而不是完整的组件库或视觉设计系统。