skills.rest
Jackliu-miaozi
Jackliu-miaoziCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Enforce Vercel web UI guideline compliance across HTML/CSS/JS codebases.

Updated Jan 7, 2026
Search Tags:#accessibility#UI#vercel#review#guidelines#web-design
One-click install
npx skills add https://github.com/Jackliu-miaozi/murmur-protocol --skill web-design-guidelines-jackliu-miaozi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Jackliu-miaozi/murmur-protocol/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/Jackliu-miaozi/murmur-protocol --skill web-design-guidelines-jackliu-miaozi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their web UI code adheres to established Web Interface Guidelines (Vercel standards), reducing accessibility issues and visual inconsistency.

Core Features & Use Cases

  • Automated UI guideline compliance checks across HTML/CSS/JS files.
  • Accessibility conformance validation (aria-labels, alt text, keyboard navigation).
  • Semantic HTML and heading structure validation to improve readability and SEO.
  • Use Case: When reviewing a new frontend feature, run this skill to surface guideline deviations before release.

Quick Start

Run the web-design-guidelines skill against your frontend codebase to receive a concise report of conformance and actionable fixes.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my frontend code for Vercel UI guideline compliance?▼

To check Vercel UI guideline compliance, run this skill against your HTML, CSS, and JS files to identify accessibility, semantic, and visual inconsistencies in your frontend codebase. It returns a concise report of deviations and actionable fixes.

What is the best way to validate accessibility attributes and semantic HTML in a web project?▼

Validating accessibility attributes and semantic HTML involves checking for proper aria-labels, alt text, heading structure, and keyboard interaction. This skill automates these conformance checks per Vercel guidelines to improve readability and SEO.

Can I use this skill to review heading structure and keyboard navigation before a feature release?▼

Yes, you can use this skill to review new frontend features before release. It surfaces UI guideline deviations across your HTML, CSS, and JS files, ensuring proper heading structure and keyboard interaction conform to Vercel standards.

Does this skill work with any frontend framework or only Vercel projects?▼

This skill applies across standard HTML, CSS, and JS projects to enforce Vercel web interface guidelines. It checks for accessibility conformance, semantic HTML, and visual consistency regardless of the specific frontend framework used.

Why does my web UI code have semantic and visual inconsistencies?▼

Semantic and visual inconsistencies occur when web UI code lacks proper heading structure, labeling, or accessibility attributes. This skill identifies these deviations against Vercel guidelines and provides actionable fixes to reduce accessibility issues.

Related Skills

Explore More Design & Creative Skills→
yuribodoyuribodo
2

web-design-guidelines

Validate HTML, CSS, and JavaScript UI files against Web Interface Guidelines.

Community
Basic
beemanbeeman
12

web-design-guidelines

Evaluate web UI components against Web Interface Guidelines for compliance.

Community
Intermediate
DarlingMarketingandTechDarlingMarketingandTech

darling-martech-redesign

Audit the darlingmartech site and migrate Tailwind styling to CSS Modules with Framer Motion.

Community
Advanced
Bizarre-IndustriesBizarre-Industries

accessibility

Audit web accessibility against WCAG 2.2 criteria and ARIA patterns.

Official
Intermediate