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.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
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.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "web-design-guidelines". Review a checkout form with a low-contrast secondary action and no visible focus state.
Expected outcome:
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.
Using "web-design-guidelines". Create theme guidance for a dashboard that supports light and dark modes.
Expected outcome:
- 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.
Using "web-design-guidelines". Audit a table workflow for narrow screens and long labels.
Expected outcome:
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.
Security Audit
SafeAll 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.
Risk Factors
⚙️ External commands (1)
🌐 Network access (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/shreyam1008-web-design-guidelines?utm_source=security_passport_badge)HTML badge
<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>Embed card
<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>Academic citations (APA · BibTeX · CFF)
APA citation
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 citation
@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"
Compare variants
7 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
shreyam1008-web-design-guidelines
2026-10-04
vercel-labs-web-design-guidelines
2026-09-09
zhanlincui-web-design-guidelines
2026-09-09
antvu-web-design-guidelines
2026-10-24
antfu-web-design-guidelines
2026-10-24
supercent-io-web-design-guidelines
2026-09-09
sickn33-web-design-guidelines
2026-09-09
Skillstore Score
Why this score Evidence Confidence: MediumWhat You Can Build
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.
Try These Prompts
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.
Best Practices
- 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.
Avoid
- 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.
Frequently Asked Questions
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?
Developer Details
Author
shreyam1008License
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5
Maintenance freshness
10/2/2026
Usage
0 downloads · 0 views
File structure