技能 frontend-responsive
📦

frontend-responsive

内容修订 r1 安全 ⚙️ 外部命令📁 文件系统访问

构建响应式前端界面

前端布局经常会在移动端、平板和桌面屏幕之间出现问题。此技能通过移动优先模式指导响应式 React、Tailwind 和 CSS 实现。

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

使用我的智能体安装

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

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

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

Agent 可读资源

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

Markdown 详情 GET /skills/devanb-frontend-responsive.md 已签名 manifest GET /api/skills/devanb-frontend-responsive/manifest 已签名 lockfile GET /api/skills/devanb-frontend-responsive/lockfile

测试它

正在使用“frontend-responsive”。 一个 React 仪表板使用固定列和拥挤的移动端控件。

预期结果:

响应会识别固定宽度面板，提出堆叠式移动端布局，调整断点，并建议更大的触控目标。

正在使用“frontend-responsive”。 一个 Tailwind 导航栏无法适配小屏幕。

预期结果:

响应会建议紧凑的移动端菜单、特定断点的间距、更清晰的换行规则，以及支持键盘访问的控件。

正在使用“frontend-responsive”。 一个产品页面使用大图片和固定排版。

预期结果:

响应会建议响应式图片尺寸、流式字号比例，以及针对移动端、平板和桌面屏幕的测试步骤。

安全审计

安全
v10 • 2026/7/9 打开版本化报告

Most static findings are false positives caused by frontend terms and inline Markdown backticks. The relative link at SKILL.md line 28 is confirmed because it traverses outside the skill package and depends on an external local file. No prompt injection or data exfiltration intent was found.

1
已扫描文件
29
分析行数
1
复核项
0
已忽略误报
能力复核项 (1)

这些是真实的本地能力，对此技能可能是预期行为，因此需要复核，但不会按已确认恶意行为计分。

高
SKILL.md:28
Path traversal sequence
[frontend responsive](../../../agent-os/standards/frontend/responsive.md)
Line 28 links to ../../../agent-os/standards/frontend/responsive.md, which traverses outside the skill package. This can cause unsafe or unaudited filesystem access during skill use.

风险因素

⚙️ 外部命令 (1)
SKILL.md:12
📁 文件系统访问 (1)
SKILL.md:28
审计者: codex 查看审计历史 →
分享与引用此报告

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

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/devanb-frontend-responsive/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/devanb-frontend-responsive/security.svg)](https://skillstore.io/skills/devanb-frontend-responsive?utm_source=security_passport_badge)

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/devanb-frontend-responsive.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 引用

DevanB. (2026). frontend-responsive security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-responsive/audits/10

BibTeX 引用

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

比较变体

2 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 使用量更高
EIS-ITS 推荐

eis-its-frontend-responsive

Skillstore 评分 78
证据置信度 高
Skillstore 使用量 62
已更新

2026-09-09

DevanB 当前

devanb-frontend-responsive

Skillstore 评分 78
证据置信度 高
Skillstore 使用量 15
已更新

2026-09-09

Skillstore 评分

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

你能构建什么

适配 React 页面

让现有 React 页面在不同视口尺寸下都能清晰适配。

标准化组件

检查组件在断点、间距、排版和触控目标方面的一致性。

规划响应式检查

为移动端、平板和桌面布局创建响应式测试场景。

试试这些提示

让组件具备响应式能力 
检查这个 React 组件，并为移动端、平板和桌面屏幕更新布局。保留现有设计意图。
转换固定间距 
将大量使用固定像素的布局选择替换为相对单位和响应式间距。解释主要布局变更。
改进导航行为 
为小屏幕适配这个导航菜单，使用触控友好的控件、清晰的断点和可访问的交互状态。
审查完整页面 
从 React 结构、Tailwind 类、排版、媒体资源和断点行为等方面审查此页面的响应式风险。按影响优先级排序修复项。

最佳实践

  • 先从移动端布局开始，再添加平板和桌面断点。
  • 当固定像素会破坏布局时，使用相对单位和流式容器。
  • 在移动端、平板和桌面宽度下测试关键工作流。

避免

  • 在定义可用的移动端布局之前添加仅适用于桌面的样式。
  • 使用会迫使小屏幕横向滚动的固定宽度。
  • 只缩小视觉尺寸，却不检查触控目标和可读排版。

常见问题

这个技能会编写 React 组件吗？
当用户请求响应式布局工作时，它可以指导 React 组件编辑。
它能帮助处理 Tailwind CSS 吗？
可以。它涵盖响应式 Tailwind 工具类，包括常见断点前缀。
它包含浏览器自动化吗？
不能。它会建议响应式检查，但测试工具取决于宿主项目。
它能改进移动端导航吗？
可以。它为菜单、触控目标以及跨屏幕尺寸的布局变化提供指导。
它仅限于 React 吗？
React 被直接提及，但 CSS 指导也适用于许多前端技术栈。
它依赖外部文件吗？
该技能引用了其包外的相对标准文件，该文件应被打包进去或移除。

开发者详情

作者

DevanB

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-responsive

引用

0519034dad657fb1f7706e0550e962beeda73fdf

维护新鲜度

2026/7/18

使用量

9 次下载 · 218 次浏览

文件结构

📄 SKILL.md

DevanB 的更多技能

查看全部

相关技能

查看全部