web-design-guidelines▌

1c:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"<p><strong>Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance.</strong></p>\n<ul>\n<li>Fetches the latest guidelines from a remote source before each review, ensuring rules stay current</li>\n<li>Accepts file paths or patterns as arguments; prompts for files if none provided</li>\n<li>Outputs findings in a terse <code>file:line</code> format for quick scanning and remediation</li>\n<li>Covers design, accessibility, and UX best practices as defined in the guidelines repository</li>\n</ul>"}}] 23:T480,<h1>Web Interface Guidelines</h1>

<p>Review files for compliance with Web Interface Guidelines.</p> <h2>How It Works</h2> <ol> <li>Fetch the latest guidelines from the source URL below</li> <li>Read the specified files (or prompt user for files/pattern)</li> <li>Check against all rules in the fetched guidelines</li> <li>Output findings in the terse <code>file:line</code> format</li> </ol> <h2>Guidelines Source</h2> <p>Fetch fresh guidelines before each review:</p> <pre class="language-text"><code class="language-text code-highlight"><span class="code-line">https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md </span></code></pre> <p>Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.</p> <h2>Usage</h2> <p>When a user provides a file or pattern argument:</p> <ol> <li>Fetch guidelines from the source URL above</li> <li>Read the specified files</li> <li>Apply all rules from the fetched guidelines</li> <li>Output findings using the format specified in the guidelines</li> </ol> <p>If no files specified, ask the user which files to review.</p>1d:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"$23"}}] 18:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 16:null