Skills web-design-guidelines
📦

web-design-guidelines

v1.0.0 Content revision r1 Medium Risk ⚙️ External commands🌐 Network access📁 Filesystem access

Review UI Against Web Guidelines

UI reviews can miss accessibility and interaction details. This skill checks frontend files against current Vercel Web Interface Guidelines and reports practical fixes.

Supports: Claude Codex Code(CC)
📊 71 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "web-design-guidelines" from https://skillstore.io/skills/supercent-io-web-design-guidelines.md and its manifest at https://skillstore.io/api/skills/supercent-io-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.

Markdown detail GET /skills/supercent-io-web-design-guidelines.md Signed manifest GET /api/skills/supercent-io-web-design-guidelines/manifest Signed lockfile GET /api/skills/supercent-io-web-design-guidelines/lockfile

Test it

Using "web-design-guidelines". Review the button component for UI guideline issues.

Expected outcome:

  • src/components/Button.tsx:15 - Icon-only button needs an accessible name.
  • src/components/Button.tsx:32 - Focus indicator is missing for keyboard users.

Using "web-design-guidelines". Check the checkout flow for accessibility and UX problems.

Expected outcome:

  • src/features/checkout/Modal.tsx:42 - Dialog should keep focus inside while open.
  • src/features/checkout/Form.tsx:88 - Error message should be connected to the related field.

Using "web-design-guidelines". Audit the home page before release.

Expected outcome:

  • src/pages/Home.tsx:8 - Main content should use a clear landmark.
  • src/pages/Home.tsx:27 - Primary action needs a visible focus state.

Security Audit

Medium Risk
v5 • 7/7/2026 Open versioned report

Most command and filesystem alerts are false positives from Markdown code fences, inline examples, and related-skill links. The skill does require unpinned WebFetch access to GitHub on each review, which creates a remote content trust risk. No credential access, shell execution, or prompt injection attempt was found.

2
Files scanned
163
Lines analyzed
3
Review items
0
False positives ignored

Confirmed security concerns (1)

Medium
SKILL.md:40SKILL.md:107-108SKILL.toon:12-14
Unpinned Remote Instructions Control Review Behavior
SKILL.md tells the agent to fetch fresh guidelines and says the fetched content contains rules and output format instructions. A changed or compromised remote file could alter the review behavior.
The instructions explicitly require remote fetching and applying all fetched rules. The risk depends on remote content changing, so confidence is high for exposure but not for active malicious intent.
Capability review items (3)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Low
SKILL.md:37
Hardcoded URL
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
The skill instructs the agent to fetch this unpinned external GitHub raw URL before each review. That is real network behavior, although no secret data is sent.
Low
SKILL.md:48
Hardcoded URL
WebFetch URL: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
The skill explicitly instructs WebFetch to retrieve this unpinned GitHub raw URL. That is real network behavior and a remote content trust risk.
Low
SKILL.toon:12
Hardcoded URL
1,Fetch Guidelines,WebFetch URL:https://raw.githubusercontent.com/vercel-labs/web-interface-guidelin
The compact skill metadata repeats the WebFetch instruction to the same unpinned GitHub raw URL. This is real external network behavior but limited to fetching public guidelines.

Risk Factors

⚙️ External commands (17)
SKILL.md:30 SKILL.md:36-38 SKILL.md:38-47 SKILL.md:47-50 SKILL.md:50-73 SKILL.md:73-76 SKILL.md:76-78 SKILL.md:78-81 SKILL.md:81-85 SKILL.md:85-87 SKILL.md:87-91 SKILL.md:91-109 SKILL.md:109-140 SKILL.md:140 SKILL.toon:2 SKILL.toon:14 SKILL.toon:18
🌐 Network access (4)
SKILL.md:37 SKILL.md:48 SKILL.md:124 SKILL.toon:12
📁 Filesystem access (2)
SKILL.md:136 SKILL.md:137
Audited by: codex View Audit History →
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.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/supercent-io-web-design-guidelines/security.svg)](https://skillstore.io/skills/supercent-io-web-design-guidelines?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/supercent-io-web-design-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-web-design-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/supercent-io-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

supercent-io. (2026). web-design-guidelines security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5

BibTeX citation

@techreport{supercent-io-supercent-io-web-design-guidelines-2026, author = {supercent-io}, title = {web-design-guidelines security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5}, note = {Author version 1.0.0} }

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 5)" version: "1.0.0" type: report authors: - name: "supercent-io" date-released: "2026-07-07" url: "https://skillstore.io/skills/supercent-io-web-design-guidelines/audits/5" identifiers: - type: other value: "skillstore:supercent-io-web-design-guidelines:audit:5" description: "Skillstore immutable audit report identifier"

Compare variants

6 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
vercel-labs Recommended

vercel-labs-web-design-guidelines

Skillstore Score 73
Evidence Confidence High
Skillstore usage 52
Updated

2026-08-21

ZhanlinCui

zhanlincui-web-design-guidelines

Skillstore Score 72
Evidence Confidence High
Skillstore usage 133
Updated

2026-08-21

antfu

antvu-web-design-guidelines

Skillstore Score 72
Evidence Confidence High
Skillstore usage 18
Updated

2026-08-21

antfu

antfu-web-design-guidelines

Skillstore Score 72
Evidence Confidence High
Skillstore usage 13
Updated

2026-08-21

supercent-io Current

supercent-io-web-design-guidelines

Skillstore Score 71
Evidence Confidence High
Skillstore usage 60
Updated

2026-08-21

sickn33

sickn33-web-design-guidelines

Skillstore Score 69
Evidence Confidence High
Skillstore usage 9
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
100
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

Review pull request UI changes

Check changed components for guideline, accessibility, and UX issues before review.

Audit design system components

Find repeated interface issues across shared components and document fix priorities.

Prepare accessibility review notes

Identify focus, labeling, landmark, and interaction problems with clear file references.

Try These Prompts

Review one component 
Review my UI code in src/components/Button.tsx. Report guideline issues with file and line references, then suggest fixes.
Audit a feature folder 
Check accessibility and UX in src/features/checkout/**/*.tsx. Prioritize issues that affect keyboard, focus, labels, and layout consistency.
Find repeated design issues 
Audit src/components/**/*.tsx for repeated Web Interface Guidelines violations. Group findings by pattern and include representative file locations.
Prepare a release audit 
Run a final UI guideline review for src/pages/**/*.tsx and src/components/**/*.tsx. Focus on severe issues, regression risk, and concise fix guidance.

Best Practices

  • Review small file groups so findings stay precise.
  • Fetch or pin the guideline source before each audit.
  • Ask for fix suggestions with each reported issue.

Avoid

  • Do not audit the whole repository in one prompt without scope.
  • Do not accept guideline findings without checking the cited file.
  • Do not use stale guideline text when current rules matter.

Frequently Asked Questions

Does this skill edit my UI files?
No. It reviews files and reports findings unless you separately ask for changes.
Which frameworks can it review?
It can review React, Vue, Svelte, HTML, CSS, SCSS, TypeScript, and JavaScript files.
Does it need internet access?
The skill is designed to fetch the Vercel guideline source before review.
Can it check accessibility?
Yes. It can flag accessibility issues covered by the fetched guidelines and visible file evidence.
What output should I expect?
You should expect concise findings with file locations, issue descriptions, and fix suggestions.
Is it a replacement for design review?
No. It helps catch guideline issues but does not replace human design review or user testing.

Developer Details

License

MIT

Author version

v1.0.0

Skillstore revision

r1

Repository

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/web-design-guidelines/

Ref

36e07d5e13068e5be64447e8f20b427cf2cbd21a

Maintenance freshness

7/18/2026

Usage

58 downloads · 125 views

File structure

📄 SKILL.md

📄 SKILL.toon