web-design-guidelines
Improve Web Interfaces with Practical Design Reviews
Inconsistent interfaces can hide actions, weaken accessibility, and fail on smaller screens. This skill provides focused design decisions and evidence-based review guidance.
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "web-design-guidelines" from https://skillstore.io/skills/shreyam1008-web-design-guidelines.md and its manifest at https://skillstore.io/api/skills/shreyam1008-web-design-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“web-design-guidelines”。 Review a checkout form with a low-contrast secondary action and no visible focus state.
预期结果:
Finding: Keyboard users may lose track of the active field, while the secondary action is difficult to read. Repair: add a visible focus treatment and verify text and control contrast against the actual background.
正在使用“web-design-guidelines”。 Create theme guidance for a dashboard that supports light and dark modes.
预期结果:
- Define surface, text, border, accent, and status roles before mapping them to components.
- Verify contrast in both themes and pair status colors with icons or text.
- Use shared spacing and motion roles so related screens remain consistent.
正在使用“web-design-guidelines”。 Audit a table workflow for narrow screens and long labels.
预期结果:
Finding: Long labels can create accidental page overflow and obscure table context. Repair: preserve intentional table scrolling, test realistic content, and provide a clear way to return to the active filter state.
安全审计
安全All five static findings are false positives. The evidence shows documentation links, an inline reference, and ordinary design guidance, with no executable command, data-exfiltration intent, or prompt injection. No security remediation is required.
风险因素
⚙️ 外部命令 (1)
🌐 网络访问 (2)
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/shreyam1008-web-design-guidelines?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/shreyam1008-web-design-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/shreyam1008-web-design-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/shreyam1008-web-design-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 引用
shreyam1008. (2026). web-design-guidelines security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1BibTeX 引用
@techreport{shreyam1008-shreyam1008-web-design-guidelines-2026,
author = {shreyam1008},
title = {web-design-guidelines security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1},
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: "web-design-guidelines security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "shreyam1008"
date-released: "2026-10-02"
url: "https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1"
identifiers:
- type: other
value: "skillstore:shreyam1008-web-design-guidelines:audit:1"
description: "Skillstore immutable audit report identifier"
比较变体
7 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
shreyam1008-web-design-guidelines
2026-10-04
vercel-labs-web-design-guidelines
2026-09-09
zhanlincui-web-design-guidelines
2026-09-09
supercent-io-web-design-guidelines
2026-09-09
Skillstore 评分
评分依据 证据置信度: 中你能构建什么
Review a product screen
Identify hierarchy, interaction, accessibility, and responsive issues in an existing screen or flow.
Shape a visual system
Create coherent roles for color, typography, spacing, borders, elevation, motion, and supported themes.
Audit a responsive workflow
Test realistic states and content across keyboard, pointer, touch, narrow-screen, and zoom scenarios.
试试这些提示
Review this screen for hierarchy, action clarity, accessibility, and responsive risks. List each issue, its user impact, and one practical repair.
Analyze this flow for loading, empty, error, success, stale, focus, and recovery states. Identify missing states and propose concise interface behavior.
Create a focused visual-system proposal for this product. Define semantic color, typography, spacing, radius, border, elevation, and motion roles that match its brand and content.
Audit the affected screen and code against the product brief. Separate measured defects from preferences, cite locations, rank impact, and give verification steps for keyboard, touch, responsive, zoom, and reduced motion.
最佳实践
- Start with the product brief, affected screen, existing conventions, and intended interaction.
- Report concrete user impact and proposed repairs, separating measured defects from preferences.
- Verify representative states with keyboard, pointer or touch, realistic content, and relevant viewport sizes.
避免
- Do not force a redesign or new component library for a focused repair.
- Do not treat ARIA attributes as proof of accessible interaction.
- Do not add dark mode, confirmation dialogs, or decorative tokens without a demonstrated need.
常见问题
What does this skill review?
Can it write frontend code?
Can it review a screenshot?
Does it replace accessibility testing?
When should I use the reference design system?
What information improves the review?
开发者详情
作者
shreyam1008许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5
维护新鲜度
2026/10/2
使用量
0 次下载 · 0 次浏览
文件结构