System Prompt / Instructions
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Usage
When a user provides a file or pattern argument:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
Frequently Asked Questions
What is web-design-guidelines?
web-design-guidelines is an expert AI persona designed to improve your coding workflow. Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". It provides senior-level context directly within your IDE.
How do I install the web-design-guidelines skill in Cursor or Windsurf?
To install the web-design-guidelines skill, download the package, extract the files to your project's .cursor/skills directory, and type @web-design-guidelines in your editor chat to activate the expert instructions.
Is web-design-guidelines free to download?
Yes, the web-design-guidelines AI persona is completely free to download and integrate into compatible Agentic IDEs like Cursor, Windsurf, Github Copilot, and Anthropic MCP servers.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Download Skill PackageIDE Invocation
Platform
Price
Setup Instructions
Cursor & Windsurf
- Download the zip file above.
- Extract to
.cursor/skills - Type
@web-design-guidelinesin editor chat.
Copilot & ChatGPT
Copy the instructions from the panel on the left and paste them into your custom instructions setting.
"Adding this web-design-guidelines persona to my Cursor workspace completely changed the quality of code my AI generates. Saves me hours every week."
Level up further
Developers who downloaded web-design-guidelines also use these elite AI personas.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
ab-test-setup
Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
accessibility-compliance-accessibility-audit
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.